首页 > 解决方案 > React-material AppBar 和主题

问题描述

我尝试将主题添加到我的反应应用程序,但是当我像这样添加时:

const theme = createTheme({
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
});

接着 :

 <ThemeProvider theme={theme}>

我在 AppBar 组件中遇到错误

> Uncaught TypeError: Cannot read property '100' of undefined
>     at renderer.dev.js:4524
>     at transformedStyleArg (renderer.dev.js:18657)
>     at handleInterpolation (renderer.dev.js:1631)
>     at serializeStyles (renderer.dev.js:1756)
>     at renderer.dev.js:2100
>     at renderer.dev.js:909
>     at renderWithHooks (renderer.dev.js:64339)
>     at updateForwardRef (renderer.dev.js:66398)
>     at beginWork (renderer.dev.js:68452)
>     at HTMLUnknownElement.callCallback (renderer.dev.js:53299)

在这一行

const backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];

theme.palette.grey 未定义

标签: reactjselectronreact-material

解决方案


const theme = createTheme({
  palette: {
    grey: {
      main: '#808080'
  },
});

推荐阅读