How Do You Add !important To A CSS-in-JS (JSS) Class Property?

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 !

Solution 1:

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',
  },
};

Solution 2:

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']
  }
}

Solution 3:

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>