实质性UI AppBar不会更改主题

Question

我有Appbar

following

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

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

如果将其添加到调色板中，则会得到黑色背景...我想当我将类型从浅色更改为深色时，我可以更改整个调色板。

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

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

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

Answer 1

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

默认情况下，AppBar使用原色作为背景色，并且从浅色切换为深色时，原色不会改变。

如果您有一个带有color="default"的AppBar，则当从亮到暗切换时，它将改变。您可以在“简单应用栏”演示中看到它：https://material-ui.com/demos/app-bar/#simple-app-bar

Answer 2

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

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