Добавьте CSS, чтобы реагировать на созданные элементы, такие как data-reactroot

Под моим корнем div реагирует создаёт еще один div "автоматически". Есть ли способ добавить класс к этому div? Мне нужно добавить высоту: 100% к ней, чтобы предотвратить перемещение фонового содержимого на мобильном телефоне, когда отображается оверлей.

Вот как это показано, когда я проверяю элемент на сайте. Мне нужно добавить высоту: 100% к div-data-activroot при нажатии кнопки. Но этот div нигде в моем исходном коде.

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

Я мог бы добавить этот код в контейнер componentDidMount()

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

Но разве нет лучшего способа сделать это? Это похоже на хакерство (плохо).

Ответ 1

#root > [data-reactroot] { height: 100% } в вашем CSS должен работать.

Или просто сам тег:

[data-reactroot] { ... }

Ответ 2

Если вы хотите использовать встроенный css, просто сделайте свою верхнюю позицию div абсолютной и левой, сверху, справа, снизу равна нулю. Поэтому, если вы проверите элемент:

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

Ответ 3

Так просто с помощью ссылки на идентификатор

#root{
  /* your css here! */ 
}