React-material AppBar and theme

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。灰色未定义

Answer 1

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