Как переопределить css, используя элемент dom в реакции

Question

Я хочу переопределить свой встроенный css, используя dom, а когда я иду! Важно, цвет не работает.

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

Вот пример по умолчанию, почему он не работает?

Я также даю ссылку: https://codesandbox.io/s/react-draft-wysiwyg-editor-ppctk

Answer 1

Независимо от того, используется ли синтаксис React или нет, значение атрибута !important должно быть установлено с помощью метода и не может быть назначено напрямую. Вот несколько примеров:

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

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

или (вероятно, в настоящее время предпочтительный метод)

От MDN

element.style.setProperty(propertyName, value, priority); где (необязательно) priority просто требует, чтобы "важный" был передан.