styleoverrides未与MUI中的样式组件一起应用

Question

我正在尝试使用MUI的styleoverrides将样式应用于使用样式组件构建的组件，但是从另一个软件包中构建的。因此，例如，组件的构建类似于：

const SectionTitle = styled(Box, {
  name: 'SectionTitle',
  slot: 'Root',
})<WizardSectionTitleProps>(({ width }) => ({
  width: width || 'auto',
  margin: 0,
}));

在HTML中，该类看起来像：

muibox-root css-d4531u-sectionTitle-root-root

我希望能够使用styleoverrides，例如

const theme = createTheme({
  palette: ...,
  components: {
    SectionTitle: {
      styleOverrides: {
          root: {
            width: '100px',
          }
       }
    }
  }
});

：我可以从 mui的全球覆盖物应该工作。另外，我可以将其与MUI组件一起使用，只是我使用stypled-components构建的自定义零件。该样式未从styleoverrides中应用。有什么想法吗？

Answer 1

说明：

1. You need to define overrides in the theme, i.e. specify which components will be overridden, example:

const theme = createTheme({
  palette: ...,
  components: {
    // With this below, you have defined the "SecitonTitle" will be overriden
    SectionTitle: {
      styleOverrides: {
          //First override
          root: {
            width: '100px',
          },
          //Second override
          example: {
            height: '200px'
          }
       }
    }
  }
});

---

2. In addition to defining what will be replaced in the theme, it is also necessary to perform another procedure, which is choose which changes (overrides) that were defined in the theme will be applied, example:

const SectionTitle = styled(Box, {
  name: "SectionTitle",
  slot: "Root",
  overridesResolver: (props, styles) => [styles.root]
})<WizardSectionTitleProps>(({ width }) => ({
  width: width || "auto",
  margin: 0
}));

解决方案：

1. Choose in the styled component that all overridden changes in the theme will be applied, example:

const SectionTitle = styled(Box, {
  name: "SectionTitle",
  slot: "Root",
  overridesResolver: (props, styles) => [Object.values(styles)]
})<WizardSectionTitleProps>(({ width }) => ({
  width: width || "auto",
  margin: 0
}));

---

2. Apply directly (through theme) without having to choose override in styled component.

To do this, you need to define which properties will be passed to the SectionTitle component, as it is a component without properties, just leave it empty, example:

const SectionTitle = styled(Box, {
  name: "SectionTitle",
  slot: "Root",
  //note that I removed the overrideResolver
})<WizardSectionTitleProps>(({ width }) => ({
  width: width || "auto",
  margin: 0
}));

const theme = createTheme({
  components: {
    SectionTitle: {
      variants: [
        {
          props: {},
          style: {
            width: "100%"
          }
        }
      ]
    }
  }
});

这意味着，如果您使用＆lt; e节标题abc =“ test”/＆gt;您将需要按以下方式定义它：

variants: [
    {
      props: { abc: 'test' },
      style: {
        width: "100%"
      }
    }
]

我希望我能有所帮助，任何问题，如果我的答案令人困惑（即使我使用的是Google翻译），请随时评论我可以澄清。