覆盖createTheme中的框组件 [英] Override Box component in createTheme

问题描述

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

推荐答案

可以使用createTheme()全局覆盖Card样式，因为Card在使用styled()接口样式时有name和styleOverrides回调。但是，您可以从定义here中看到，Box没有。

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

如果要创建可由createTheme全局样式化的像Box这样的基本组件，则需要在调用styled()

时在选项中定义以下属性

• name：这样样式化引擎就可以识别您的组件。
• overridesResolver：让MUI知道如何解析最终的样式(结合组件的自定义变量、属性、状态创建的其他样式)。

下面是演示的最小示例：

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

这篇关于覆盖createTheme中的框组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！