How to overriding css by using dom element in react

Question

I want to override my inline css by using dom and when I am going for !important , color doesn't work.

 componentDidMount(){
    document.getElementById("para").style.color = "red !important"
  }

Here is the default example , why it doesn't work ?

I am also giving link : https://codesandbox.io/s/react-draft-wysiwyg-editor-ppctk

Don't use document.getElement... and react together, you're doing react wrong. If you want to set styles based on things happening, those styles should be a part of state. EDIT: this is the quickest thing I can google that will shows you how to do it reasonably well — Adam Jenkins
– Adam Jenkins, Commented Feb 21, 2020 at 14:22

Rene van der Lende · Accepted Answer · 2020-02-21 14:51:34Z

1

Regardless of whether using React syntax or not, attribute !important value has to be set with a method and cannot be assigned directly. Here are a few examples:

// Specific old IE
if (document.all) {
  element.style.setAttribute('cssText', 'propertyName: value !important');

  // Modern browser
} else {
  element.setAttribute('style', 'propertyName: value !important');
}

or (probably currently the preferred method)

From MDN

element.style.setProperty(propertyName, value, priority); where (optional) priority simply requires "important" to be passed.

edited Feb 21, 2020 at 14:51

answered Feb 21, 2020 at 14:41

Rene van der Lende

5,3912 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to overriding css by using dom element in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related