Material UI AppBar Won't Change Theme

问题

I have Appbar

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

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

回答1:

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.

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.

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

来源：https://stackoverflow.com/questions/56224684/material-ui-appbar-wont-change-theme