React adding !important seems to break component re-rendering

Question

I have a simple React component that accepts a prop that hides/shows a component's children. I hide/show using the style attribute and display: none. If I use display: none !important, the component no longer re-renders when it receives new props.

Within the render method, it looks like this:

var style = {};

if(shouldHide) {
    //this works
    style = {
        display: 'none'
    };
    //this does not
    //style = {
    //  display: 'none !important'
    //};
}

return (
    <span style={style} {...this.props} />
);

Here's the full example: https://jsfiddle.net/ccnokes/LnrnrLy2/ (relevant lines start at line 27)

What's going on here? Am I missing something?

Answer 1

!important is currently unsupported - https://github.com/facebook/react/issues/1881

Does not appear they will be adding it any time soon.

They offer this as a workaround:

var sheet = document.createElement('style');
document.body.appendChild(sheet);
sheet.innerHTML = 'html {font-size: 1em !important;}';

But not sure if you want to go down that path or not.

I was able to resolve with a class switch:

//css
.hidden {display: none !important};

//jsx
var hideClass;

if(shouldHide) {
    hideClass = "hidden";
}

return (
    <span className={hideClass} {...this.props} />
);

Updated I went ahead and added the workaround above. And the fiddle here - https://jsfiddle.net/kellyjandrews/oan4grme/

Not exactly the answer you wanted, but it works :)