TypeError：无法读取未定义的属性'main' - React 问题答案

【问题标题】：TypeError: Cannot read property 'main' of undefined - React problemTypeError：无法读取未定义的属性'main' - React 问题
【发布时间】：2020-07-14 22:38:30
【问题描述】：

我正在使用 React 制作一个简单的网页，并使用 Material-ui 中的 createMuiTheme 在主题中定义了以下调色板。

palette: {
    primary: {
      main: "#333333"
    },
    secondary: {
      main: "#727171"
    },
    background: {
    paper: "#f8f3f0",
    default: "#f8f3f0"
    },
    accent: {
      main: "#80d6d1"
    }
}

然后，当我想为我使用的某些文本使用我的强调色时：

const useStyles = makeStyles(theme => ({
  content: {
    backgroundColor: theme.palette.background.default,
    minHeight: "90vh"
    color: theme.palette.background.main
  }
}));

我收到以下错误：

TypeError: Cannot read property 'main' of undefined

  71 |     minHeight: "90vh"
> 72 |     color: theme.palette.accent.main
  73 |   }
  74 | }));

你有什么想法吗？

【问题讨论】：

木槌对象中没有背景属性，你只有主次元和重音
其实是有的，我这里略过，以免太长。我会添加它以免混淆（我现在没有必要）
使用theme.palette.accent.main.
尝试添加console.log(theme.palette) 并确保accent 属性存在。
还是 theme.palette.background.main 不存在，没有 main ！

标签： css node.js reactjs material-ui

【解决方案1】：

请确保您在 App.js 文件中从“@material-ui/core”导入和NOT从“@material-ui/styles”导入。

我也犯了同样的错误，现在一切正常！

谢谢！

【讨论】：

就我而言，这就是问题所在，在本地运行样式工作正常，但在云上它不起作用，将其更改为核心工作