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)

18
demandé sur user3711421 2016-12-21 12:28:04

2 réponses

#root > [data-reactroot] { height: 100% } dans votre CSS devrait fonctionner.

Ou tout simplement la balise:

[data-reactroot] { ... }
17
répondu Fabian Schultz 2017-07-14 13:07:07

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>
       ....
3
répondu idealweek.net 2017-04-27 12:39:16