Display a hidden element using React

Question

I have a div that is hidden by the css, (display: none), when I click a button I want it to display (document.getElementById("invite").style.display = "block"; but this code does apparently only work on elements that aren't hidden by the css (if I do document.getElementById("invite").style.display = "none"; to hide it and then call the "block" on it it gets visible again. But for some reason it doesn't work for elements hidden by css, anyone know why and how I can show elements hidden with React?

Edit: Might be worth mentioning that the css attribute has !important after it.

`.style.display = "block";` *should* override the existing CSS style that hides the element, can you show a [MCVE] illustrating the problem? — CertainPerformance, Sep 01 '20 at 07:11
Added an edit, not sure if it's the !important that's doing it, but I need it to override material ui's css — DanDev, Sep 01 '20 at 07:12
If the CSS has `!important`, that's a problem - its specificity is too high. Any way you can remove that `!important`? — CertainPerformance, Sep 01 '20 at 07:12
Ugly workaround: https://stackoverflow.com/questions/462537/overriding-important-style — CertainPerformance, Sep 01 '20 at 07:14
I need the !important since otherwise the css attributes won't work since Material UI has its own — DanDev, Sep 01 '20 at 07:14
@user14200927 - `!important` is a last resort that shouldn't be necessary 99% of the time. Try just making your selectors more specific. — T.J. Crowder, Sep 01 '20 at 07:15
Fixed it by using ".style.setProperty("display", "inline", "important")", thanks for the link CertainPerformance — DanDev, Sep 01 '20 at 07:18

Nitheesh · Answer 1 · 2020-09-01T07:41:01.063

The issue is with the display: none !important; style that you provided in the style css.

Since you have add it as !important this will not be over witten by any scripts.

You could make use of CSSStyleDeclaration.setProperty() to add the !important again this.

Working example.

function toggle(event) {
  var popup = document.getElementById("toggleElement");
  if (popup.style.display === "none") {
    popup.style.setProperty('display', 'block', 'important');
  } else {
    popup.style.setProperty('display', 'none', 'important');
  }
  event.stopPropagation();
}

#toggleElement {
  border: 1px solid black;
  padding: 50px;
  display: none !important;
}

<button onclick="toggle(event)">toggle</button>
<div id="toggleElement">
  Toggle Element
</div>

Display a hidden element using React

1 Answers1