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

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

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

Answer 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>