!important inline styles in react
JavascriptReactjsJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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:)
Solution 2 - Javascript
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' }};
Solution 3 - Javascript
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!
Solution 4 - Javascript
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>
Solution 5 - Javascript
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.
Solution 6 - Javascript
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'
}
});
Solution 7 - Javascript
This is originally answered by Daniel above. I just want to share my answer as I refactor his answer to work with hooks.
- Define ref
const ref = useRef(null);
- Add ref to your desired node (ex. div, table)
<div ref={ref}></div>
- 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" )
Solution 8 - Javascript
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.