title: React js overwriting CSS sheet
body: <p>I'm having trouble converting this example code to a React JS format. Here is the example in codepen, <a href="https://codepen.io/WebDevSimplified/pen/LqKQRK" rel="nofollow noreferrer">https://codepen.io/WebDevSimplified/pen/LqKQRK</a>. My structure is very similar if not the same for both the html and css code.</p>
  <p>I have a navbar with some responsiveness in the css style sheet.</p>
  <pre><code>.navbar {
      display: flex;
  }
  @media (max-width: 800px) {
     .navbar {
          display: none;
      }
  }
  </code></pre>
  <p>This toggle function shows and hides the navbar div.</p>
  <pre><code>toggle() {
      this.setState({displayMenu: !this.state.displayMenu});
      document.getElementById(&quot;menu&quot;).style.display = this.state.displayMenu ? &quot;flex&quot; : &quot;none&quot;;
      console.log(this.state.displayMenu);
  }
  </code></pre>
  <p>However, upon using the toggle function the css responsiveness no longer works. Why?</p>