reactjs - 在 createTheme 中覆盖 Box 组件

Question

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

Answer 1

您可以使用 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 }} />

现场演示

引用资料

• https://mui.com/system/styled/#api
• https://mui.com/system/styled/#custom-components