Ajouter des CSS pour réagir des éléments créés comme data-reactroot
sous ma racine div react crée une autre div "automatiquement". Est-il possible d'ajouter une classe pour que les div? Je dois ajouter hauteur: 100% à elle pour empêcher le contenu de fond de défiler dans mobile quand une superposition est montrée.
Voici comment cela s'affiche lorsque j'inspecte l'élément sur le site. Je dois ajouter hauteur: 100% à la data-reactroot div quand un bouton est cliqué. Mais cette div n'est nulle part dans mon code source.
<div id="root">
<div data-reactroot data-reactid="1" data-react-checksum="161698...
je pourrais ajouter ce code dans le conteneur componentDidMount ()
let root = document.querySelectorAll('[data-reactroot]')[0];
if (root) {
root.style.height = '100%';
}
<!-Mais n'y a-t-il pas une meilleure façon de le faire? Cela ressemble à une sorte de hacky (dans le mauvais sens)
2 réponses
#root > [data-reactroot] { height: 100% }
dans votre CSS devrait fonctionner.
Ou tout simplement la balise:
[data-reactroot] { ... }
si vous voulez utiliser CSS en ligne, il suffit de faire votre position div supérieure est absolue et Gauche, Haut, Droite, Bas est zéro. Donc, si vous inspectez l'élément:
<div id="root">
<div data-reactroot>
<div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px>
....