Using !important with inline styles in React

# Using !important with inline styles in React

To use !important with inline styles in React:

Set the ref prop on the element.
Pass a function to the ref prop.
Use the setProperty method on the element's style object to set a property to important.

App.js

Copied!
import {useState, useLayoutEffect, useRef} from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  const ref = useRef(null);

  useLayoutEffect(() => {
    ref.current.style.setProperty('display', 'block', 'important');
    ref.current.style.setProperty('background-color', 'lime', 'important');
  }, []);

  return (
    <div>
      {/* 👇️ With ref handled in useLayoutEffect */}
      <h2 ref={ref}>Count: {count}</h2>

      {/* 👇️ With inline ref */}
      <h2
        ref={el => {
          if (el) {
            el.style.setProperty('display', 'block', 'important');
            el.style.setProperty('background-color', 'lime', 'important');
          }
        }}
      >
        Count: {count}
      </h2>

      <button onClick={() => setCount(current => current + 1)}>
        Increment
      </button>
    </div>
  );
};

export default App;

react style important

The code for this article is available on GitHub

The code snippet shows 2 ways to use !important with inline styles in React.

Adding !important to an inline style is not supported by default, so we have to use a ref and set the CSS property to important programmatically.

The first example uses the useRef hook to create a ref object.

App.js

Copied!
const ref = useRef(null);

The useRef() hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

App.js

Copied!
useLayoutEffect(() => {
  ref.current.style.setProperty('display', 'block', 'important');
  ref.current.style.setProperty('background-color', 'lime', 'important');
}, []);

Notice that we have to access the current property on the ref object to get access to the h2 element on which we set the ref prop.

When we pass a ref prop to an element, e.g. <div ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

We used the setProperty() method to set a new value for a property on the element's CSS style declaration object.

App.js

Copied!
useLayoutEffect(() => {
  ref.current.style.setProperty('display', 'block', 'important');
  ref.current.style.setProperty('background-color', 'lime', 'important');
}, []);

The method takes the following 3 parameters:

propertyName - the name of the CSS property we want to modify. Note that property names of multiple words must be hyphenated.
value - the new value for the CSS property
priority - can be set to important or an empty string.

The value parameter must not contain !important. The priority should be passed as the third parameter to the `setProperty` method.

The useLayoutEffect hook is identical to useEffect, but fires synchronously after all DOM mutations.

# Using !important with an inline `ref` in React

The second example shows how to set a CSS property to important with an inline ref.

App.js

Copied!
<h2
  ref={el => {
    if (el) {
      el.style.setProperty('display', 'block', 'important');
      el.style.setProperty('background-color', 'lime', 'important');
    }
  }}
>
  Count: {count}
</h2>

The code for this article is available on GitHub

The function we passed to the ref prop will get called with the element, so we can use the same approach to set its properties to !important.

I've also written an article on how to use the calc() function in inline styles.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Using !important with inline styles in React