CODEWITHSUNDEEP
cssreactjsmaterial-ui
Omar Hussein
Omar Hussein

Reputation: 1147

CSS Module Overriding UI Styling

so I'm using Material UI Components on my react-app, for example for a button text, I would like to give it a margin-top and font-weight, however, I'm using CSS Modules, so I cannot just override the default CSS Styles, so I had to use the !important flag, is there a cleaner/better approach to do this and avoid using the better flag? Here's an example of what I'm looking like for a certain component.

enter image description here

I was adviced to use atomic CSS but googling that it seems like they're advising me to use in-line styles and that's something I've been meaning to avoid for future reusability.

TIA

Upvotes: 0

Views: 98

Answers (2)

Keyur Gajjar
Keyur Gajjar

Reputation: 360

Using important in CSS is not a good way. I prefer you please use the parent class or tag to avoid important. One main thing is very important your CSS run last after all CSS files. It is the most important. For example please check the below code.

<div class="test">
   <span class="span"></span>
</div>

Than write down css for span like this

div.test span.span{ ... }

Also, you use more hierarchy to avoid important in css

body div.test span.span{ ... }

Upvotes: 0

Omar Hussein
Omar Hussein

Reputation: 1147

Got through by setting specific CSS classes, for example for this font weight and margin top, my new CSS looks like

.loginSignUpLink.priority {
    margin-top: 4%;
    font-weight: 1000;
}

and my classname is as follows

className={classNames(styles.loginSignUpLink, styles.priority)}

Upvotes: 1

Related Questions