!important inline styles in react

Apparently React does not support this. But i got this hack as i did my research

    <div ref={(node) => {
      if (node) {
        node.style.setProperty("float", "right", "important");
      }
    }}>                    
    </div>

Good luck:)

20+'!important' is '20!important'.

When you just give a number, react adds "px" for you; but you're using a string, so you have to specify the unit. Also I'm pretty sure there needs to be a space between "!important" and whatever's to the left of it.

style={{ height: '20px !important' }};

A good trick to use which is cleaner and more consistent for other CSS properties:

ref={(el) => el && el.style.setProperty(<property>, <value>, "important")}

Hope this helps!

This is the only way I could get it to work with React 16.

const id="unique_id"; 
<React.Fragment>
    <style>
      {`
#${id} {
  background-color: transparent !important;
}
      `}
    </style>
    <Frame id={id} />
</React.Fragment>

I recommend using styled components, if you have a good reason to make use of !important, as the style props do not support !important and probably won't in the future.

Here is an example where we overwrite Semantic-UI's padding on grid columns. You can actually leave out the !important as "bumping up the specifity" is sufficient.

const StyledColumn = styled.div(({size}) => ({className: `${size} wide column`})`
    &&&&& {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }
`
<StyledColumn size="three"></StyledColumn>

&&&&&& <- bumps up specifity.