我目前正在使用全局主题覆盖自定义一些组件,希望尽可能保持 Material-UI 主题引擎的完整性。我知道我可以使用组合来完成我想要做的事情,但我想看看是否可以通过覆盖来实现这一点。
目标
更改 BottomNavigation 组件的背景颜色以使用当前主题的主颜色,并确保标签获得在该背景颜色之上清晰可见的颜色。
我目前的方法
const theme = createMuiTheme({
palette: {
primary: {
main: 'rgba(217,102,102,1)'
}
},
overrides: {
MuiBottomNavigation: {
root: {
backgroundColor: 'rgba(217,102,102,1)'
}
},
MuiBottomNavigationAction: {
wrapper: {
color: '#fff'
}
}
}
});
此代码完成任务并将底部导航变为红色,标签/图标变为白色。但是,我希望能够灵活地更改调色板中的主色并相应地更新组件。
我正在尝试做什么
const theme = createMuiTheme({
palette: {
primary: {
main: 'rgba(217,102,102,1)'
}
},
overrides: {
MuiBottomNavigation: {
root: {
backgroundColor: 'primary.main'
}
},
MuiBottomNavigationAction: {
wrapper: {
color: 'primary.contrastText'
}
}
}
});
通过这种方式,我可以轻松更新原色,而不必担心在覆盖中更改对它的每个引用。我意识到我可以将 rgba 值提取到 const 中,这将实现我的部分目标,但我不知道如何访问像 const 这样有用的东西code>contrastText
,以防我选择更浅的原色。
那么 - 有谁知道在主题覆盖定义中引用主题调色板颜色的方法吗?任何帮助将不胜感激!
最佳答案
这里还有另一种方法。 createMuiTheme
accepts any number of additional theme objects to be merged together .
考虑到这一点,您可以复制 your accepted answer没有两个不同的 ThemeProvider
。如果您将主题定义移至其自己的模块,则不会在每次渲染时重新创建它。
import { createMuiTheme } from "@material-ui/core/styles";
const globalTheme = createMuiTheme({
palette: {
primary: {
main: "rgba(217,255,102,1)"
}
}
});
const theme = createMuiTheme(
{
overrides: {
MuiButton: {
root: {
backgroundColor: globalTheme.palette.primary.main
},
label: {
color: globalTheme.palette.primary.contrastText
}
}
}
},
globalTheme
);
export default theme;
我更新了 CodeSandBox来反射(reflect)这一点。
关于reactjs - Material-UI 主题覆盖利用主题调色板颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57630926/