我有一个应用程序,它使用 box 代替 div 通常放置在 MUI 生态系统中的位置。我的问题是,是否可以对所有框组件进行全局主题覆盖,就像如何使用主题提供程序全局覆盖所有卡片的背景颜色一样。
覆盖 createTheme 中的 Box 组件
IT技术
reactjs
material-ui
themeprovider
2021-05-24 01:14:34
1个回答
您可以Card
使用全局覆盖样式,createTheme()
因为当使用API 设置样式时,它Card
具有名称和styleOverrides
回调styled()
。但是,Box
正如您从此处的定义中所见, 不是。
const theme = createTheme({
components: {
// this works
MuiCard: {
styleOverrides: {
//
}
},
// this does not work
MuiBox: {
styleOverrides: {
//
}
}
}
});
如果要创建像Box
可以全局设置样式的基础组件,则createTheme
需要在调用时在选项中定义以下属性styled()
name
:这样样式引擎可以识别您的组件。overridesResolver
: 让 MUI 知道如何解析最终的样式(通过与组件的自定义变体、props和状态创建的其他样式相结合)。
以下是演示的最小示例:
const theme = createTheme({
components: {
MuiDiv: {
styleOverrides: {
root: {
backgroundColor: "green"
}
}
}
}
});
const Div = styled("div", {
name: "MuiDiv",
overridesResolver: (props, styles) => {
return [styles.root];
}
})();
<Div sx={{ width: 10, height: 10 }} />
现场演示
参考
其它你可能感兴趣的问题