javascript - Material-UI - AppBar backgroundColor 在设置类型 : 'dark' in createMuiTheme 时不会改变

Question

当我通过将 theme.palette.type 的值更改为 'dark' 来切换主题时，所有白色组件的颜色都变为深色，但事实并非如此对于 AppBar 这样的组件，它的主色为 #3f51b5 作为默认值。

我认为通过将 theme.palette.type 设置为 'dark' 会将其颜色更改为深色变体 theme.palette.primary.dark (#303f9f) 或者可能是真正的深色 (#212121)，但事实并非如此。如何将深色主题也应用到此组件？

const theme = createMuiTheme({
  palette: {
    type: 'dark',
    primary: {
      light: "#7986cb",
      main: "#3f51b5",
      dark: "#303f9f",
      contrastText: "#fff",
    },
});

const App = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <AppBar />
    </MuiThemeProvider>
  );
}

Answer 1

使用颜色作为默认值。

const App = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <AppBar color="default" />
    </MuiThemeProvider>
  );
}

注意:如果您更改背景纸颜色，则可以使用继承颜色属性。

const darkTheme = createTheme({
    palette: {
        primary: {
            main: '#01bf71'
        },
        secondary: {
            main: '#fffff'
        },
        background: {
            default: '#000',
            paper: '#000'
        },
        type: 'dark',
        text: {
            primary: '#fff',
            secondary: '#fff'
        }
    }
});

现在使用 <AppBar color="inherit" />这将使应用栏背景颜色为 #000