我有应用程序栏(在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"
}
4条答案
按热度按时间rvpgvaaj1#
注意:此答案适用于MUI v4
在https://material-ui.com/上,如果你将主题从亮改为暗(使用AppBar中的灯泡图标),你会注意到AppBar没有改变。
默认情况下,应用栏使用原色作为背景色,并且在从亮切换到暗时原色不会更改。
如果你有一个
color="default"
的应用栏,那么当从亮到暗切换时,它会改变。你可以在简单应用栏演示中看到这一点:https://material-ui.com/demos/app-bar/#simple-app-bar00jrzges2#
从MUI v5开始,要更改暗模式下的AppBar颜色,您需要使用
enableColorOnDark
属性。此外,如果在v5中使用color="default"
,则颜色不会更改。它需要是here指定的值。Ref: https://mui.com/components/app-bar/#api
xmq68pz93#
好吧,如果你可以添加颜色作为默认到AppBar,然后你可以尝试切换黑暗模式,它会工作,但AppBar将失去默认的蓝色:
wfveoks04#