web-dev-qa-db-fra.com

Hauteur de l'article de la grille Material-UI

J'ai une ligne avec plusieurs éléments et je veux que la hauteur de tous les éléments soit égale à celle du plus grand élément. Je veux fondamentalement que tous les éléments aient la même hauteur pour cette grille.

<Grid container layout={'row'} spacing={8}>
      <Grid item className={classes.section} xs={12} sm={12} md={4} lg={4} xl={4}>
        <div className={classes.teamMemberName}>
          {name}
        </div>
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <FirstTimeFillRate fillRate={firstTimeFillRate} />
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <BackOrders
          backOrdersByItem={backOrdersByItem}
          backOrdersStoresWait={backOrdersStoresWait}
        />
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <OrderVolume orderVolume={orderVolume} />
      </Grid>

      <Grid item xs={12} sm={12} md={8} lg={8} xl={8} className={classes.section}>
        <Inventory inventory={inventory} />
      </Grid>
    </Grid>

La classe de section a une couleur de fond de gris et je peux voir que les sections n'héritent pas de la hauteur de la ligne comme on peut le voir dans ce bac à sable: https://codesandbox.io/s/1826lw51z

material-ui
18
user6388353

Appliquer simplement height: 100% aux enfants des objets de la grille. Dans le code que vous avez fourni dans le bac à sable, ajoutez cette propriété à la classe section:

const section = {
  height: "100%",
  paddingTop: 5,
  backgroundColor: "#fff"
};

Notez que l'exemple de code dans votre question est différent du sandbox. Le fichier JSX doit donc ressembler à ceci:

<Grid item xs={12} md={4}>
  <div style={section}>component</div>
</Grid>

Voici le bac à sable mis à jour avec une démo de travail: https://codesandbox.io/s/m7r7jnzzlx

19
Imperator