material-ui and TypeScript: How to use !important? material-ui and TypeScript: How to use !important? reactjs reactjs

material-ui and TypeScript: How to use !important?


You can just cast it. For example:

left: {  display: "block",  float: "left!important" as any,},

or

left: {  display: "block",  float: "left!important" as "left",},

Here's a playground example.


there are several ways to overstyle a MUI component. Simplest and straight forward is to apply a stlye on the component itself. an inline styled weights more specifity then the provided css. You would use it like this:

<Paper style={{display: 'block'}}...>

If you want to make use of normal CSS:

import './style.css'

and provide a class on the component

<Paper className="left"...>

By this you will be able to use normal css like

left: {  display: "block",  float: "left!important",},

I really recommand to think about the specifity and what to achieve with your styles, before you implement them, otherwise you will start a fight against MUI styles and this can get pretty nasty.Hopefully this helps, happy coding ;-)