Material UI AppBar 不会改变主题答案

【问题标题】：Material UI AppBar Won't Change ThemeMaterial UI AppBar 不会改变主题
【发布时间】：2019-10-07 01:04:56
【问题描述】：

我有应用栏

<AppBar position="fixed" className={classes.appBar}>
  <Toolbar style={{ padding: 0 }}>
    <... />
  </Toolbar>
</AppBar>

在我的页面上，当我将 MUI 主题更改为浅色时，它的默认颜色并没有改变

import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

ReactDOM.render(
  <MuiThemeProvider theme={theme}>
    <Index />
  </MuiThemeProvider>,
  document.getElementById("root")
);

如果我将它添加到调色板，那么我会得到黑色背景...我认为当我将类型从浅色更改为深色时我可以更改整个调色板...？

primary: {
  main: "#000000"
}

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

在https://material-ui.com/ 上，如果您将主题从浅色更改为深色（使用 AppBar 中的灯泡图标），您会注意到 AppBar 未更改。

AppBar默认使用原色作为背景色，从浅色切换到深色时原色不变。

如果您有一个带有color="default" 的AppBar，那么它会在从浅色切换到深色时发生变化。您可以在 Simple App Bar 演示中看到这一点：https://material-ui.com/demos/app-bar/#simple-app-bar

【讨论】：

如果您真的想更改 AppBar 的背景颜色，请在主题中添加 override：const theme = createMuiTheme({ overrides: { MuiAppBar: { colorPrimary: { backgroundColor: "#FFC0CB" // Pink AppBar } } }, palette: { type: "dark" } });
@user1972814 我想知道为什么人们没有多谢你。
你是男人 :) 谢谢你的回答，它有很大帮助

【解决方案2】：

好吧，如果你可以为 AppBar 添加默认颜色，然后你可以尝试切换暗模式，它会起作用，但 AppBar 会失去默认的蓝色：

<AppBar position="static" color="default">
      <Toolbar>
        <Typography >Shanti Lal</Typography>
        <Switch checked={darkMode} onChange={() => setDarkMode(!darkMode)} />
      </Toolbar>
    </AppBar>

【讨论】：

这不是和已经选择的答案一样，只是没有参考吗？

【解决方案3】：

从 MUI v5 开始，要在深色模式下更改 AppBar 颜色，您需要使用 enableColorOnDark 属性。此外，如果在 v5 中使用 color="default"，则颜色不会改变。它需要是一个指定的值here。

参考：https://mui.com/components/app-bar/#api

【讨论】：