Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Wrong CSS classes take precedence

See original GitHub issue

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.

Issue Analytics

State:
Created 2 years ago
Comments:10 (6 by maintainers)

Top GitHub Comments

2reactions

mnajdovacommented, Oct 7, 2021

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

1reaction

keo-hgsdkcommented, Oct 7, 2021

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

Top Results From Across the Web

CSS style precedence not working as expected - Stack Overflow

Yes it will override the other styles. As Harry explained, the specificity is 011 for .myrow > td , it will be given...

Precedence in CSS (When Order of CSS Matters)

Keeping CSS specificity low across all the selectors in your project is a worthy goal. It's generally a sign that things are in...

Specificity - CSS: Cascading Style Sheets - MDN Web Docs

As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

Conflicting className precedence rules · Issue #1010 - GitHub

The order of class names defined on an HTML element have no effect on styling. CSS Specificity only cares about what is defined...

Sass: @extend

Because @extend updates style rules that contain the extended selector, their styles have precedence in the cascade based on where the extended selector's ......