material-ui : AppBar 不使用主题中定义的颜色答案

【问题标题】：material-ui : AppBar not using color defined in the themematerial-ui : AppBar 不使用主题中定义的颜色
【发布时间】：2020-04-26 00:12:22
【问题描述】：

我使用这个网站创建了一个主题：

https://cimdalli.github.io/mui-theme-generator/

我需要主要颜色为红色，次要颜色为蓝色。但我需要 AppBar 是灰色的。在预览中，AppBar 正在使用我需要的颜色：

生成的代码如下所示：

const theme = createMuiTheme({
  palette: {
    primary: { main: '#f44336' },
    secondary: { main: '#7b1fa2' }
  },
  appBar: {
    color:  '#bdbdbd' ,
  }
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <div className="App">
        <AppBar position="fixed">
          <Toolbar />
        </AppBar>
      </div>
    </MuiThemeProvider>
  );
}

但 AppBar 始终采用非原色。如果我现在将其设置为默认值，则它是白色的。绝不是我需要的灰色。

我制作了这个 codeSandbox 来测试这个主题：

https://codesandbox.io/s/material-ui-themes-4inc1?file=/src/index.js

任何帮助将不胜感激！谢谢

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

经过一些测试，如果您将样式直接放在 AppBar 元素上，它似乎可以工作：https://codesandbox.io/s/material-ui-themes-izlou

如果您更改 primary: { main: '#f44336' } hexa 值，它似乎也会更改您的 appBar 的背景颜色

【讨论】：