Material UI AppBar 不会改变主题

Question

我有应用栏

<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"
}

Answer 1

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

AppBar默认使用原色作为背景色，从亮到暗切换时原色不会改变。

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

Answer 2

从 MUI v5 开始，要在深色模式下更改 AppBar 颜色，需要使用enableColorOnDarkprop. 另外，如果color="default"在 v5 中使用，则颜色不会改变。它需要是此处指定的值。

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