title: MUI and TypeScript: How to use !important?
body: <p>I'm building a React application and I'm using MUI for my components. I wonder how I can give an <code>!important</code> property to a style?</p>
  <p>I tried this:</p>
  <pre><code>&lt;Paper className=&quot;left&quot;...&gt;
  </code></pre>
  <p>I'm using <a href="https://mui.com/guides/typescript/#usage-of-withstyles" rel="noreferrer"><code>withStyles</code> and <code>WithStyles</code></a>.
  Then in my <code>styles.ts</code>:</p>
  <pre><code>left: {
    display: &quot;block&quot;,
    float: &quot;left!important&quot;,
  },
  </code></pre>
  <p>But this throws the error:</p>
  <pre><code>[ts] Type '&quot;left!important&quot;' is not assignable to type '&quot;right&quot; | &quot;none&quot; | &quot;left&quot; | &quot;-moz-initial&quot; | &quot;inherit&quot; | &quot;initial&quot; | &quot;revert&quot; | &quot;unset&quot; | &quot;inline-end&quot; | &quot;inline-start&quot; | undefined'.
  index.d.ts(1266, 3): The expected type comes from property 'float' which is declared here on type 'CSSProperties'
  (property) StandardLonghandProperties&lt;TLength = string | 0&gt;.float?: &quot;right&quot; | &quot;none&quot; | &quot;left&quot; | &quot;-moz-initial&quot; | &quot;inherit&quot; | &quot;initial&quot; | &quot;revert&quot; | &quot;unset&quot; | &quot;inline-end&quot; | &quot;inline-start&quot; | undefined
  </code></pre>
  <p>How would one assign an <code>!important</code> flag when using material-ui with TypeScript?</p>