时间戳

首页 > 解决方案 > 在 createTheme 中覆盖 Box 组件

reactjs - 在 createTheme 中覆盖 Box 组件

问题描述

我有一个应用程序，它利用盒子来代替通常放置 div 以留在 MUI 生态系统中的位置。我的问题是，是否可以为所有框组件设置全局主题覆盖，就像您如何使用主题提供程序全局覆盖所有卡片的背景颜色一样。

标签： reactjsmaterial-uithemeprovider

解决方案

Card您可以使用全局覆盖样式，createTheme()因为当使用API设置样式时，它Card具有名称和styleOverrides回调。styled()但是，Box正如您从此处的定义中看到的那样， 没有。

const theme = createTheme({
  components: {
    // this works
    MuiCard: {
      styleOverrides: {
        //
      }
    },
    // this does not work
    MuiBox: {
      styleOverrides: {
        //
      }
    }
  }
});

如果你想创建一个像Box那样可以全局样式化的基础组件createTheme，你需要在调用的时候在options中定义如下属性styled()

  • name：因此样式化引擎可以识别您的组件。
  • overridesResolver: 让 MUI 知道如何解析最终样式（通过与组件的自定义变体、prop 和 state 创建的其他样式相结合）。

以下是演示的最小示例：

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

现场演示

Codesandbox 演示

参考

推荐阅读