For my React webpage, I decided to create a theme using createMuiTheme from material-ui, and here is the palette I defined:
palette: {
primary: {
main: "#333333"
},
secondary: {
main: "#727171"
},
background: {
paper: "#f8f3f0",
default: "#f8f3f0"
},
accent: {
main: "#80d6d1"
}
}
When attempting to use the accent color for some text, I typically do it like this:
const useStyles = makeStyles(theme => ({
content: {
backgroundColor: theme.palette.background.default,
minHeight: "90vh",
color: theme.palette.background.main
}
}));
However, I encountered an error message:
TypeError: Cannot read property 'main' of undefined
71 | minHeight: "90vh",
> 72 | color: theme.palette.accent.main
73 | }
74 | }));
Do you have any insights on what might be causing this issue?