reactjs 材质UI v4 AppBar不会更改主题

ca1c2owp  于 2023-01-04  发布在  React
关注(0)|答案(4)|浏览(158)

我有应用程序栏(在MUI v4中)

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

在我的页面上,当我将MUI主题更改为浅色时,它的默认颜色不变

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

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

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

如果我把这个添加到调色板中,那么我会得到背景黑色...我想当我把类型从浅改为深时,我可以改变整体调色板...?

primary: {
  main: "#000000"
}
rvpgvaaj

rvpgvaaj1#

注意:此答案适用于MUI v4
https://material-ui.com/上,如果你将主题从亮改为暗(使用AppBar中的灯泡图标),你会注意到AppBar没有改变。
默认情况下,应用栏使用原色作为背景色,并且在从亮切换到暗时原色不会更改。
如果你有一个color="default"的应用栏,那么当从亮到暗切换时,它会改变。你可以在简单应用栏演示中看到这一点:https://material-ui.com/demos/app-bar/#simple-app-bar

00jrzges

00jrzges2#

从MUI v5开始,要更改暗模式下的AppBar颜色,您需要使用enableColorOnDark属性。此外,如果在v5中使用color="default",则颜色不会更改。它需要是here指定的值。
Ref: https://mui.com/components/app-bar/#api

xmq68pz9

xmq68pz93#

好吧,如果你可以添加颜色作为默认到AppBar,然后你可以尝试切换黑暗模式,它会工作,但AppBar将失去默认的蓝色:

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

wfveoks04#

const matteBlackTheme = createMuiTheme({
    overrides: {
      MuiAppBar: {
        colorPrimary: {
      backgroundColor: '#000000' // Override primary color for AppBar
    },
    colorDefault: {
      backgroundColor: '#000000' // Override default color for AppBar
    }
      }
    },
    palette: {
      type: 'dark',
      background: {
        paper: '#18191A' // Override color for paper surfaces
      }
    }
  });

相关问题