React-material AppBar和主题

Question

我尝试将主题添加到我的react应用程序中，但当我像这样添加时：

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未定义

Answer 1

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