Material-UI - 设置类型时 AppBar backgroundColor 不会改变：createMuiTheme 中的“dark”答案

【问题标题】：Material-UI - AppBar backgroundColor doesn't change when set type: 'dark' in createMuiThemeMaterial-UI - 设置类型时 AppBar backgroundColor 不会改变：createMuiTheme 中的“dark”
【发布时间】：2019-12-13 05:05:05
【问题描述】：

当我通过将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>
  );
}

【问题讨论】：

你能分享一些你的代码，让我们看看你做了什么吗？
Material UI AppBar Won't Change Theme的可能重复
不知道的问题，谢谢

标签： javascript reactjs themes material-ui

【解决方案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" />这将使appbar背景颜色为#000

【讨论】：