覆盖 createTheme 中的 Box 组件

IT技术 reactjs material-ui themeprovider
2021-05-24 01:14:34

我有一个应用程序,它使用 box 代替 div 通常放置在 MUI 生态系统中的位置。我的问题是,是否可以对所有框组件进行全局主题覆盖,就像如何使用主题提供程序全局覆盖所有卡片的背景颜色一样。

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 }} />

现场演示

代码沙盒演示

参考