Add CSS to react created elements like data-reactroot

Question

Under my root div react creates another div "automatically". Is there a way to add a class to that div? I need to add height: 100% to it to prevent the background content to scroll in mobile when an overlay is shown.

This is how it is shown when i inspect the element on the site. I need to add height:100% to the data-reactroot div when a button is clicked. But that div is nowhere in my source code.

<div id="root">     <div data-reactroot data-reactid="1" data-react-checksum="161698... 

I could add this code in the container's componentDidMount()

    let root = document.querySelectorAll('[data-reactroot]')[0];     if (root) {         root.style.height = '100%';     } 

But isnt there a better way to do it? This feels like kind of hacky (in a bad way)

Answer 1

#root > [data-reactroot] { height: 100% } in your CSS should work.

Or just the tag itself:

[data-reactroot] { ... }