CSS Module Overriding UI Styling

Question

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.

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

I'm not aware of Material UI so I don't know if there is a better answer out there, but could you order your stylesheets so that your external stylesheet is last, making it override any other styles. This should hopefully avoid the !important — Chillin'
– Chillin', Commented Oct 16, 2019 at 12:51
In the JS?! How so? If that is the case, I dont think my answer will help. — Chillin'
– Chillin', Commented Oct 16, 2019 at 13:00

Omar Hussein · Accepted Answer · 2019-10-16 13:28:40Z

1

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

answered Oct 16, 2019 at 13:28

Omar Hussein

1,1472 gold badges15 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Keyur Gajjar · Accepted Answer · 2019-10-16 13:38:37Z

0

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{ ... }

answered Oct 16, 2019 at 13:38

Keyur Gajjar

3582 silver badges7 bronze badges

Collectives™ on Stack Overflow

CSS Module Overriding UI Styling

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related