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