Dodaj CSS do reagowania utworzonych elementów, takich jak reaktor danych

Question

Pod moim root div reaguje tworzy kolejny div "automatycznie". Czy istnieje sposób na dodanie klasy do tego div? Muszę dodać wysokość: 100%, aby zapobiec przewijaniu treści w tle na urządzeniu mobilnym po wyświetleniu nakładki.

Tak to wygląda, gdy sprawdzam element na stronie. Należy dodać wysokość: 100% do div reaktywacji danych po kliknięciu przycisku. Ale ten div nie jest nigdzie w moim kodzie źródłowym.

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

mogę dodać ten kod w pojemniku za componentDidMount()

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

Ale isnt istnieje lepszy sposób to zrobić? To wydaje się być trochę hackowate (w zły sposób)

Answer 1

#root > [data-reactroot] { height: 100% } w CSS powinno działać.

Lub po prostu sam tag:

[data-reactroot] { ... } 

Answer 2

Jeśli chcesz używać in-line css, po prostu ustaw najwyższą pozycję div jako absolutną, a lewą, górną, prawą, dolną - zero. Więc jeśli skontrolować element:

<div id="root"> 
    <div data-reactroot> 
    <div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px> 
     ....