0
214
ViewsSpreading a global theme to another theme in MUI (Material UI)
I am using MUI's ThemeProvider and have created a Themes.js file. In that file, I have defined globalTheme for my global styles like type and border-radius. I want to spread globalTheme it to lightTheme and darkTheme. This works in CodeSandbox but not VSCode. When I save I get an error "TypeError: Invalid attempt to spread non-iterable instance" see the image below.
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
Answer question