Prevent scrolling using CSS on React rendered components
<p>So I render a component via React within my <code>html</code> like so:</p>

<pre><code> &lt;html&gt;
  &lt;body&gt;
    &lt;div id=app&gt;${appHtml}&lt;/div&gt;
    &lt;script src="/bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Within my app I have a burger button, that <code>onClick</code> goes full screen.</p>

<p>However, the body is scrollable. I'd normally add a class to the <code>body</code> tag and make it <code>overflow: hidden</code> to prevent this. However, my react component is rendered within the <code>body</code> tag so I have no control over toggling classes based on a click within a react component.</p>

<p>Has anyone got any ideas/advice on how i'd achieve what i'm looking for.</p>

<p>Thanks!</p>