我有一个应用程序利用盒子来代替通常放置 div 的位置以保留在 MUI 生态系统中。我的问题是，是否可以对所有框组件进行全局主题覆盖，就像如何使用主题提供程序全局覆盖所有卡片的背景颜色一样。
最佳答案
您可以使用 createTheme() 全局覆盖 Card 样式，因为 Card 有一个 name和一个 styleOverrides使用 styled() 设置样式时的回调应用程序接口(interface)。但是，Box 没有，正如您从定义 here 中看到的那样.
const theme = createTheme({
components: {
// this works
MuiCard: {
styleOverrides: {
//
}
},
// this does not work
MuiBox: {
styleOverrides: {
//
}
}
}
});
如果你想创建一个像 Box 这样的基础组件，可以通过 createTheme 全局设置样式，你需要在调用 时在选项中定义以下属性>样式化()
name:因此样式引擎可以识别您的组件。overridesResolver:让 MUI 知道如何解析最终样式(通过与组件的自定义变体、prop 和状态创建的其他样式相结合)。
下面是演示的最小示例:
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 }} />
现场演示
引用资料
关于reactjs - 在 createTheme 中覆盖 Box 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69455056/