styleOverrides not being applied with styled components in MUI

user_5314907 0
Viewed 176

I am trying to use MUI's styleOverrides to globally apply styles to a component that was built using styled-components, but from another package. So for example, the component is built like:

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

In the HTML, the class looks like:

MuiBox-root css-d4531u-SectionTitle-root

I want to be able to use styleOverrides, like:

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

As far as I can tell from MUI's global overrides, this should work. Also I am able to use it with MUI components, just not custom ones I build using styled-components. The styles are not applied from the styleOverrides. Any ideas why?

material-ui styled-components reactjs
1 Answers

Explanation:

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
}));

Solution(s):

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

This means that if you use <Section Title abc="test"/> you will need to define it as follows:

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

I hope I could have helped, any questions, if my answer is confusing (even because I'm using Google Translate), don't hesitate to comment that I'll be available to clarify.

user_107371140
Related