材质UI AppBar不会更改主题

问题描述:

我有Appbar

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

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

on my page when I change the MUI Theme to Light, it's not changing from it's default color

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

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

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

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

If I add this to the palette, then I get background black... I thought I could change overall palette when I change type from light to dark..?

primary: {
  main: "#000000"
}

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

On https://material-ui.com/ if you change the theme from light to dark (using the lightbulb icon in the AppBar), you'll notice that the AppBar is unchanged.

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

The AppBar uses the primary color as the background color by default and the primary color doesn't change when switching from light to dark.

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

If you have an AppBar with color="default", then it will change when switching from light to dark. You can see this on the Simple App Bar demo: https://material-ui.com/demos/app-bar/#simple-app-bar