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?

Why do you need `!important` at all? Inline styles have higher precedence than all other styles. — Jordan Running, Jul 05 '15 at 00:57
If a stylesheet has `display: block !important` on it for some reason, inline style won't trump it, right? — ccnokes, Jul 05 '15 at 00:58
@WiredPrairie, I think hide/showing makes sense for use cases like form validation where the element could be hidden and shown multiple times while being used. The pros/cons of each approach have been debated in the comments here: http://stackoverflow.com/questions/24502898/show-or-hide-element-in-react-js — ccnokes, Jul 06 '15 at 14:17

score 6 · Accepted Answer · edited Jul 05 '15 at 10:28

6

!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 :)

edited Jul 05 '15 at 10:28

knowbody

8,106
6
45
70

answered Jul 05 '15 at 01:17

Kelly J Andrews

5,083
1
19
32

Yeah, that works for me as well. I was hoping to avoid using a CSS class because I'm planning on reusing the component across applications and so don't want to make any assumptions about the CSS. – ccnokes Jul 05 '15 at 01:26
I would like to know what specifically is keeping the inline style from rendering though. I tried several iterations but nothing would work quite the way I would expect it. – Kelly J Andrews Jul 05 '15 at 01:54
Agreed. I'll give this post a bit longer on SO to see if there's a resolution, if not, I'll open an issue on react's GitHub – ccnokes Jul 05 '15 at 02:29

React adding !important seems to break component re-rendering

1 Answers1