!important inline styles in react

Question

It's there a way to add inline styles with the !important override?

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

<div style={style}></div>

This isn't working as I would have hoped.

Answer 1

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' }};

Answer 2

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

Answer 3

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!

Answer 4

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>

Answer 5

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.

Answer 6

This is originally answered by Daniel above. I just want to share my answer as I refactor his answer to work with hooks.

1. Define ref const ref = useRef(null);
2. Add ref to your desired node (ex. div, table) <div ref={ref}></div>
3. Add this code ref.current.style.setProperty(<property>, <value>, "important") inside useLayoutEffect

Please see the sample codes below

import React, { useRef, useLayoutEffect } from "react";


const SampleComponent = () => {

   const ref = useRef(null);

   useLayoutEffect(() => {
    ref.current.style.setProperty("border-top", "0px", "important");
  }, []);

   return (
      <div ref={ref}>
         {/* additional codes here */}
      </div>
   )
}

Note:

• property is in CSS format (ex. "border-top" )

Answer 7

Yeah the way I found to do this was that already mentioned above:

const styles = (theme: any) => ({
    panelSize: {
        height: 480,
        width: 360,
    },
    progress: {
        height: '120px !important', 
        margin: theme.spacing.unit * 2,
        width: '120px !important'
    }
});

Answer 8

a slite improvment with modern syntax to make code shorter:

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

Answer 9

I solved it with setting className prop

.height {
    height: 20px !important;
}

className={ styles.height }

Answer 10

I try the suggestions above for width, but could not get it to work.

This is what work for me, I created style.css file, and added in my case, width: 100% !important to a class, and then just import this file into my component, and call this class, and it work.

Answer 11

I was able to resolve it by doing something like this:

style={
  height: `20px ${" !important"}`
};

<div style={style}></div>

I had to add the space before "!important" because the browser kept removing that space when running the program.