0
226
VistasDifundir un tema global a otro tema en MUI (Material UI)
Estoy usando ThemeProvider de MUI y he creado un archivo Themes.js . En ese archivo, he definido globalTheme para mis estilos globales como tipo y radio de borde. Quiero difundir globalTheme a lightTheme y darkTheme . Esto funciona en CodeSandbox pero no en VSCode. Cuando guardo, aparece el error "Error de tipo: intento no válido de difundir una instancia no iterable", vea la imagen a continuación.
import { createTheme } from "@mui/material"; // global theme styles const globalTheme = createTheme({ typography: { fontFamily: "'Inter', sans-serif", body1: { fontSize: "1.25rem", }, }, }); export const lightTheme = createTheme( ...globalTheme, { palette: { mode: "light", // primrary brand color primary: { main: "#b9431d", }, // secondary brand color secondary: { main: "#0074aa", }, text: { // text colors primary: "rgba(32, 26, 24, 1)", secondary: "rgba(32, 26, 24, .8)", disabled: "rgba(32, 26, 24, .38)", }, background: { default: "#F9F2ED", }, }, // overrides for components components: { MuiTooltip: { styleOverrides: { tooltip: { color: "white", backgroundColor: "black", }, arrow: { color: "black", }, }, }, }, }, ); // dark theme styles export const darkTheme = createTheme( ...globalTheme, { palette: { mode: "dark", text: { // text colors primary: "rgba(237, 224, 220, 1)", secondary: "rgba(237, 224, 220, .8)", disabled: "rgba(237, 224, 220, .38)", }, // primary brand color primary: { main: "#ffb59f", }, // secondary brand color secondary: { main: "#7fd2ec", }, background: { default: "#201a18", paper: "#201a18", }, }, // overrides for components components: { MuiTooltip: { styleOverrides: { tooltip: { color: "black", backgroundColor: "white", }, arrow: { color: "white", }, }, }, }, }, );
·
Juan Pablo Isaza
Responde la pregunta