gpt4 book ai didi

reactjs - Material-UI 主题覆盖利用主题调色板颜色

转载 作者:行者123 更新时间:2023-12-03 13:41:59 25 4
gpt4 key购买 nike

我目前正在使用全局主题覆盖自定义一些组件,希望尽可能保持 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com