MUI error: Cannot read properties of undefined (reading 'drawer')

Question

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',
    },
  },
});

@NearHuscarl [link](https://codesandbox.io/s/practical-blackwell-7r2iu?file=/src/components/Dashboard/Dashboard.js) it's very strange, but at sandbox it's working... — cenak, Oct 08 '21 at 09:11
@cenak maybe check your [import](https://stackoverflow.com/a/69400708/9449426) code — NearHuscarl, Oct 08 '21 at 09:16
@NearHuscarl checked, but import code is ok. I copied code to sandbox without changing, only with deleting some sensitive parts and it's works on sandbox. I am checking this parts now, maybe them has bug, but its strange that week ago this code worked — cenak, Oct 08 '21 at 09:24
Also, the sensitive parts does not interact in any way with the object indicated by the error — cenak, Oct 08 '21 at 09:26

score 10 · Answer 1 · answered Oct 14 '21 at 06:01

10

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

answered Oct 14 '21 at 06:01

Rain Kullamaa

101
3

1

Thanks for sharing! That helped me narrow down my issue. – FooBar Nov 16 '21 at 13:40

score 2 · Answer 2 · answered Dec 07 '21 at 19:16

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"

score 0 · Accepted Answer · answered Oct 08 '21 at 09:44

0

It's strange but solution is reinstalling all MUI packages

answered Oct 08 '21 at 09:44

cenak

61
1
7

score 0 · Answer 4 · answered Jun 10 '22 at 11:28

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()
}

score 0 · Answer 5 · answered Jan 01 '23 at 08:18

I had similar error where my deployed code started failing, but after reading answers from here, I figured it out that it was caused by a chipcomponent which I introduced in last commit and all other error message was not so informative. I would like to thank you guys for putting your valuable info here: I error which I was getting is : TypeError: Cannot read properties of undefined (reading 'contrastText')

score 0 · Answer 6 · answered Jan 30 '23 at 12:23

I got this error at <Chip /> component with a custom color - color="appGreen".

All i have to do is to add a contrastText prop to the color definition, like so:

const theme = createTheme({
  palette: {
    appGreen: {
      main: "#84F5BF",
      contrastText: "#303D45" // <--- HERE
    },
  },

score -1 · Answer 7 · answered Sep 25 '22 at 06:17

-1

in my case i removed the color prop and replaced it with sx={{bgcolor:'#000',color:'#fff'}} and it was fixed

answered Sep 25 '22 at 06:17

Kamrul Islam

255
4
15

MUI error: Cannot read properties of undefined (reading 'drawer')

7 Answers7

Linked