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.

ClassName override by other class !important

See original GitHub issue

The css classes are not ordert correct, have to override everything with important

<div role="region" class="MuiAccordion-region">
    <div class="MuiAccordionDetails-root makeStyles-details-11 css-15v22id-MuiAccordionDetails-root">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
    </div>
</div>

so i have to add everywhere !important to override the style it looks like its your own style logic

Issue Analytics

State:
Created 2 years ago
Comments:9 (1 by maintainers)

Top GitHub Comments

1reaction

coulgreercommented, Oct 12, 2021

Yea that is exactly what I was saying @Mansi1. By definition of Cascading Style Sheets, the more specificity a rule has the more priority it gets. If rules have the same specificity, then it is whichever rule is farthest down the file.

In order to use JSS before emotion, you need to use StyledEngineProvider and use the prop injectFirst. StyledEngineProvider is used to help migrate from v4 to v5. Please be aware that JSS will be replaced in favor of emotion so the first solution I gave should be the preferred solution in future projects.

1reaction

coulgreercommented, Oct 10, 2021

Ok so I’ve came up with a solution to solve this issue if it is using MUI v5. MUI v5 is moving away from JSS to the styled and sx API. That said, I believe that makeStyles and useStyles should be removed and replaced with something else. I have a CodeSandbox as an example solution based on this assumption. Also, I added background colors to better visualize what styles effect which components.

https://codesandbox.io/s/classname-override-by-other-class-important-28848-fwxj0

Top Results From Across the Web

How to override the properties of a CSS class using another ...

You should override by increasing Specificity of your styling. There are different ways of increasing the Specificity. Usage of !important ...

How to override the CSS properties of a class using another ...

To override the CSS properties of a class using another class, we can use the !important directive. In CSS, !important means “this is ......

How to Override CSS Styles - W3docs

When an important rule is used on a style declaration, this declaration will override any other declarations. When two conflicting declarations with the...

How to Override One CSS Class with Another - Netguru

Here's how to do it: Firstly, check which class overrides it. Let's say your markup returns: <div class="range-specific range"> ...

How to override CSS style from another style

Id Overrides Class. A class selector is re-usable. In other words, multiple elements can have the same class name and so the same...