MUI 错误：无法读取未定义的属性（读取“抽屉”）答案

【问题标题】：MUI error: Cannot read properties of undefined (reading 'drawer')MUI 错误：无法读取未定义的属性（读取“抽屉”）
【发布时间】：2021-10-07 12:47:11
【问题描述】：

我在项目 MUI v5.0.2 上使用。一周前我的项目运行正常（没有错误），但今天突然出现了一个错误（代码没有变化）

错误： TypeError: Cannot read properties of undefined (reading 'drawer')

代码：

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

Visual Studio 代码也说： Property 'zIndex' does not exist on type 'DefaultTheme'

我试过this solution，但没有帮助

也许有人知道如何解决它？

UPD：我试图回滚到之前的提交，但同样的错误发生在那里，虽然这之前没有发生过

主题对象：

const theme = createTheme({
  palette: {
    primary: {
      light: '#757ce8',
      main: '#3f50b5',
      dark: '#002884',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
  },
});

【问题讨论】：

能否分享theme对象的值
@ziishaned 已添加到帖子中
@cenak 你能把你的代码放到 Codesandbox 上吗？
@NearHuscarl link 这很奇怪，但在沙盒中它正在工作......
@cenak 可能会检查您的import 代码

标签： javascript reactjs material-ui

【解决方案1】：

undefined (reading 'contrastText') 我也遇到了类似的错误我花了一段时间才弄明白，但这个来自我使用的芯片组件，问题是我在 <Chip /> 组件之一中使用了danger 而不是error，这搞砸了整个网站。

更糟糕的是它没有告诉我这个错误来自哪里

【讨论】：

感谢分享！这帮助我缩小了问题范围。

【解决方案2】：

确保从正确的包中导入它。我多次犯过这个错误。

import { makeStyles } from "@mui/styles"

另外，请确保您的 useStlyes 由 ThemeProvider 包裹。这些也需要从正确的包中导入。

import { createTheme, Theme, ThemeProvider } from "@mui/material/styles"

【讨论】：

【解决方案3】：

这很奇怪，但解决方案是重新安装所有 MUI 包

【讨论】：