Adding !important on an inline style causes it to not be applied

[fwextensions]

Adding !important to an inline style seems to cause it to be stripped from the style object and not applied to the component. For example:

<div style={{ color: "red !important" }}>this is not red</div>

That produces black text, and there doesn't appear to be any inline style on that div at all. But remove the !important from the string:

<div style={{ color: "red" }}>this is red</div>

And that's now red text, as expected.

I have no idea what might be causing this. Something weird in the build process, it seems.

[yuanqing]

Likely a bug or something that needs to be configured in postcss-modules. In the meantime, you would need to specify something like style="color: red !important". (Though ideally, you’d avoid using !important in the first place)

[fwextensions]

I stumbled across this bug trying to override styles on an Inline component and flailing about trying to get any change to show up. I don't think CSS modules provides enough capability to override the styles the way I want, so I'll need to just create a different component.

[pbroom]

I ran into the same issue. It had to do with the fact that !important isn't supported in JSX inline styles. I used a class instead and dumped the CSS in my stylesheet. It worked as expected after that.