How do you add !important to a CSS-in-JS (JSS) class property?

Question

I am trying to use some CSS-in-JS classes from this answer with a material UI component in my React project. I need to override the CSS coming from Bootstrap so I want to use the !important modifier, I've only used this in .css files before and I'm unsure how to do it in CSS-in-JS. My styles object to be passed into the Material-UI withStyles function looks like the following, how do I add !important to the fontSize attribute? I've tried 30 !important and a few other things but nothing seems to work.

Thanks

const styles = {
  labelRoot: {
    fontSize: 30
  }
}

@AdrianBrand so you can't use important in inline CSS? Is it automatically the most important? — intA, Feb 05 '19 at 01:41
Inline styles have the highest precedence or specificity in a document — Adrian Brand, Feb 05 '19 at 01:43
https://stackoverflow.com/questions/23074748/important-inline-styles-in-react — zzzbra, Feb 05 '19 at 01:48

score 8 · Answer 1 · answered Feb 05 '19 at 01:48

8

You shouldn't need to do this as Adrian points out, but if you absolutely need to do it you can set it to a string:

const styles = {
  labelRoot: {
    fontSize: '30px !important',
  },
};

answered Feb 05 '19 at 01:48

Danny Delott

6,756
3
33
57

If this was the recommended syntax at some point, it is not now, and doesn't work with function values. The answer by @Andres9619 is what the official documentation suggests, and (unsurprisingly) works for all cases. – AntonOfTheWoods Feb 10 '22 at 07:38

score 7 · Answer 2 · answered Feb 19 '20 at 17:06

7

You can use the array-based syntax for space and comma separated values.

Just do this:

const styles = {
  labelRoot: {
    fontSize: [[30], '!important'],
    margin: [[5, 10], '!important']
  }
}

answered Feb 19 '20 at 17:06

Andres9619

184
2
4

This also works with function properties, so - fontSize: (size) => [[size], '!important'] - Whereas the other options *do not*. – AntonOfTheWoods Feb 10 '22 at 07:24

score 4 · Accepted Answer · answered Feb 05 '19 at 01:48

You can style !important the same way inline that you would in css.

In the below example, both divs are styled blue !important in css, but the pink div has important also inline, and so takes precedence.

div {
  width: 200px;
  height: 200px;
  background: blue !important;
  flex:1;
}
section{display:flex;}

<section>
  <div style="background: red;"></div>
  <div style="background: pink !important;"></div>
</section>

How do you add !important to a CSS-in-JS (JSS) class property?

3 Answers3

Linked