Using !important with inline styles in React

This article will give you some solutions for using !important with inline styles in React. You can apply the element. style.setProperty() method or add “!important” to attribute value method.

Solutions for using !important with inline styles in React

Important CSS is used to change the order of priority of CSS. When a rule is assigned the important directive, it will have the highest priority, even if the element has a local CSS declaration or inline CSS.

Suppose when we declare the CSS as follows:

p.second{ color: blue }

p.second{ color: red }

At this time, the rule declared later will precede the rule declared first. In the example above, the text p.second will be displayed in red. However, you can format the above text to display blue by adding !important right after the first rule as follows:

p.second{ color: blue !important }

p.second{ color: red }

Use element.style.setProperty() method

The CSSStyleDeclaration.setProperty() method interface sets a new value for a property on a CSS style declaration object.

Syntax:

setProperty(propertyName, value)

Parameters:

• propertyName: a string that is the name of the CSS property that needs to be changed.
• value: a string with the new value for the property. Treated as the empty string if specified.

With this method, we can inline css the element so let’s try applying !important to a div tag in the example below.

Code:

import React from "react";
 
export default function App() {
    return (
        <div>
            <h2>Using !important with inline styles in React | LearnShareIT</h2>
            <div style={{width:"100px",height:"100px"}} ref={(element) => {
                if (element) {
                    element.style.setProperty("border", "red 1px solid", "important");
                }
            }}>                    
        </div>
        </div>
    );
}

Output:

Notice our border property. At the end of the value, the value “! important” takes precedence. So we can use !important with inline styles using the setProperty() property.

Use useRef hook method

In this way we will use the useRef hook so that we can point to the element that we need to set the style and then use !important. Check out the example below

Code:

import React, { useLayoutEffect, useRef } from "react";
 
export default function App() {
    const ref=useRef(null);
    useLayoutEffect(() => {
        ref.current.style.setProperty('background-color', 'red', 'important');  
    },[]);
 
    return (
        <div>
            <h2>Using !important with inline styles in React | LearnShareIT</h2>
            <div ref={ref} style={{width:"100px",height:"100px"}}>                    
        </div>
        </div>
    );
}

Output:

So we can use the useRef method to point to the element we want to style and set the red background color to add the !important attribute. However, to use this way we have to use the useLayoutEffect hook, good luck with the two methods above.

Summary

To summarize, in the article, we learned about using !important with inline styles in React and some ways to do it. We recommend you use the element.style.setProperty() method. Good luck!

Maybe you are interested:

• Set background color with inline Styles in React
• Combine multiple inline Style objects in React
• Setting a background image with inline styles in react

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs