title: React - using inline important styling
body: <p>I'm using React in a chrome extension and I need to insert elements into the page via the content script. The extension may insert these elements into any page in which it's loaded on (kind of like Last Pass would) so I need to override any existing styling that might target general elements.</p>
  
  <p>For the most part i've managed to get around this via using iframes as css in iframes can't be modified but I need to give styling to the iFrames and one or two parent containers in order for them to display properly. </p>
  
  <p>As i've just learnt you unfortunately can't use the !important feature with inline React CSS. I can maybe understand why this is but for things live Chrome Extensions that use content scripts I need to be able to use important tags...</p>
  
  <p>I've been looking for a work around and managed to find this:</p>
  
  <p><a href="https://www.npmjs.com/package/react-with-important-style" rel="nofollow noreferrer">react-with-important-style</a></p>
  
  <p>But whenever the component renders it doesn't look very smooth at all so looking for another option. </p>
  
  <p>Can anyone recommend a good workaround? </p>
  
  <p>Thanks</p>