React-material AppBar 和主题

Posted 2023-02-22

【中文标题】React-material AppBar 和主题

【英文标题】：React-material AppBar and theme

【发布时间】：2021-12-06 19:04:28

【问题描述】：

我尝试将主题添加到我的 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 未定义

【问题讨论】：

当然是未定义的，因为pallete 中没有grey 属性

【参考方案1】：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：***.com/help/how-to-answer。祝你好运?

这没有帮助。也许我做错了什么。这是演示：codesandbox.io/s/example-material-demo-forked-smo39?file=/…