Wrong CSS classes take precedence

[keo-hgsdk]

TL;DR
Needed to npm uninstall @mui/x-data-grid and npm install @mui/x-data-grid@next

After migrating from v4 to v5, and having refactored out @mui/styles, I now see that my MuiButtons, when rendered, have classes on the form: css-xyz1234-MuiButtonBase-root-MuiButton-root.

On some pages in my app, styles coming from css-xyz1234-MuiButtonBase-root-MuiButton-root are overridden by the styles coming from MuiButton-root, which causes buttons to seem unstyled.

On other pages, the styles from css-xyz1234-MuiButtonBase-root-MuiButton-root correctly take precedence, giving buttons the intended styling.

If I inspect a MuiButton component in the docs, I see no classes of the long form, but instead css-xyz1234.

I tried using StyledEngineProvider as described in https://mui.com/guides/migration-v4/#style-library without effect.

Although I suspect that this is an issue with my project and not material-ui, I'm posting this since I'm out of ideas on how to move forward and hoping that it might help others migrating.

[michaldudak]

Would you be able to reproduce this behavior on CodeSandbox?

[keo-hgsdk]

I haven't been able to so far, which I realize limits your ability to help me.. I was hoping that it would ring a bell to someone

[michaldudak]

@mnajdova, perhaps you would have a clue what may be going on?

[mnajdova]

Let me try to clarify few things and we can go step by step.

The difference between: css-xyz1234-MuiButtonBase-root-MuiButton-root and css-xyz1234 is simply coming from development vs production build. We are adding the components names in dev mode so that it could be easier for debugging. In production we are removing these to improve the size of the styles generated.

If there are styles coming from the class: MuiButton-root it is likely that v4 is injected somewhere. Note that in v5 we are not assigning any styles to these classes, we are simply adding them on the component as a utility classes that people can use for styling the components, for example with pure CSS. The other option is that, there is a component that has a nested selector that adds these styles, for example:

const Wrapper = styled('div')({
  '& .MuiButton-root': {
    // some styles that have bigger specificity?
  }
});

---

Could you provide package or yarn lock so that we can take a look at the dependencies? and the version installed?

[keo-hgsdk]

Thank you for that in depth response! It does clear up a lot. Styles coming from the class MuiButtonBase-root are definitely the culprit - removing the class in dev tools makes everything look as intended. I think you are probably correct that v4 is injected somehow. I have ruled out the other option you mentioned.

Here's my package-lock.json, in a .txt:

package-lock.json.txt

[mnajdova]

I can definitely see @material-ui/core, it comes as being dependency on @mui/x-data-grid I believe. I think you need to upgrade to v5 on @mui/x-data-grid too, but probably @m4theushw can provide more info on this. The goal is to try to remove @material-ui/core everywhere from package-lock.json

[keo-hgsdk]

Good catch, that was sneaky! Thank you so much for pointing me in the right direction. @material-ui/core is no longer to be found after npm uninstall @mui/x-data-grid

[mnajdova]

You probably want to upgrade @mui/x-data-grid to v5 instead of removing it :)

[keo-hgsdk]

Yep, I did! Updated original question with TL;DR :)

[mnajdova]

Great thanks! I am closing.