styleOverrides 未与 MUI 中的样式化组件一起应用答案

【问题标题】：styleOverrides not being applied with styled components in MUIstyleOverrides 未与 MUI 中的样式化组件一起应用
【发布时间】：2022-08-10 15:22:31
【问题描述】：

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

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。任何想法为什么？

标签： reactjs material-ui styled-components

【解决方案1】：

你找到解决方案了吗？

【讨论】：