React - Composant plein écran (avec une hauteur de 100%)

Question

Je suis coincé avec l'affichage d'un composant React nommé "home" qui prend 100% de la hauteur de mon écran. J'ai beau utiliser un style en ligne CSS ou React, cela ne fonctionne pas.

Dans l'exemple ci-dessous, html , corps y #app sont définis par la CSS avec la valeur height : 100%. Pour .home J'ai utilisé un style en ligne (mais que ce soit en CSS ou en style en ligne, c'est pareil) : Le problème semble provenir <div data-reactroot data-reactid='1'> qui n'est pas défini avec height : 100%.

Si je le pirate avec l'outil de développement de Chrome, ça marche :

Quelle est donc la bonne façon d'afficher un composant de pleine hauteur dans React ?

Toute aide est la bienvenue :)

Answer 1

html, body, #app, #app>div {
  height: 100%
}

Cela permettra à toute la chaîne d'être height: 100%

Answer 2

Vous pouvez aussi le faire :

body > #root > div {
  height: 100vh;
}

Answer 3

Cela m'ennuie pendant des jours. Et finalement, j'utilise le sélecteur de propriétés CSS pour le résoudre.

[data-reactroot] 
        {height: 100% !important; }

Answer 4

Ce n'est peut-être pas la réponse idéale, mais essayez ceci :

style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}

La taille reste attachée aux frontières, ce qui n'est pas ce que vous voulez, mais vous donne un peu le même effet.

Answer 5

body{
  height:100%
}

#app div{
  height:100%
}

cela fonctionne pour moi