I am using on project MUI v5.0.2. One week ago my project worked correctly (there were no errors), but today an error appeared out of nowhere (there were no changes in the code)
Error:
TypeError: Cannot read properties of undefined (reading 'drawer')
The code:
const useStyles = makeStyles((theme) => ({
...
appBar: {
zIndex: theme.zIndex.drawer + 1, //this line showed at error message
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
...
}));
Also Visual Studio Code says:
Property 'zIndex' does not exist on type 'DefaultTheme'
I tried this solution but it didn't help
Maybe someone knows how to solve it?
UPD: I tried to roll back to previous commits, but the same error occurs there, although this has not happened before
theme object:
const theme = createTheme({
palette: {
primary: {
light: '#757ce8',
main: '#3f50b5',
dark: '#002884',
contrastText: '#fff',
},
secondary: {
light: '#ff7961',
main: '#f44336',
dark: '#ba000d',
contrastText: '#000',
},
},
});
I had a similar error with undefined (reading 'contrastText')
Took me a while to figure it out but this one came from a Chip comopnent that i used and the issue was that i used danger instead of error in one of the <Chip /> components and that messed up the whole site.
Worse thing is that it doesn't tell me where this error is coming from
Make sure you import it from the right packages. I did this mistake multiple times.
import { makeStyles } from "@mui/styles"
Also, make sure your useStlyes is wrapped by ThemeProvider.
Those also need to be imported from the right packages.
import { createTheme, Theme, ThemeProvider } from "@mui/material/styles"
I'm not sure what the root cause is but this hack worked for me:
import makeStyles from '@mui/styles/makeStyles'
import {useTheme} from '@mui/material/styles'
const useStyles = () => {
const theme = useTheme()
const useStylesInner = makeStyles(() => ({
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
}))
return useStylesInner()
}