reactjs - styleOverrides 未应用于 MUI 中的样式组件

Question

我正在尝试使用 MUI 的 styleOverrides 将样式全局应用到使用 styled-components 构建的组件，但来自另一个包。例如，该组件的构建方式如下:

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

在 HTML 中，该类如下所示:

MuiBox-root css-d4531u-SectionTitle-root

我希望能够使用 styleOverrides，例如:

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

据我所知 MUI's global overrides ，这应该有效。我还可以将它与 MUI 组件一起使用，但不能与我使用 styled-components 构建的自定义组件一起使用。这些样式不是从 styleOverrides 应用的。有什么想法吗？

Answer 1

说明:

1.您需要在主题中定义覆盖，即指定将覆盖哪些组件，例如:

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. 除了定义主题中将替换的内容之外，还需要执行另一个过程，即选择将应用主题中定义的哪些更改(覆盖)，例如:

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

解决方案:

1. 在样式组件中选择将应用主题中的所有覆盖的更改，例如:

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

---

2. 直接应用(通过 theme )，无需在 styled component 中选择覆盖。

为此，您需要定义将哪些属性传递给SectionTitle组件，因为它是一个没有属性的组件，只需将其留空即可，例如:

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%"
          }
        }
      ]
    }
  }
});

这意味着如果您使用 <Section Title abc="test"/>您需要按如下方式定义它:

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

我希望我能为您提供帮助，如有任何问题，如果我的回答令人困惑(即使我使用的是 Google 翻译)，请随时发表评论，我会予以澄清。