web-dev-qa-db-ja.com

Material-UI Gridアイテムの高さ

複数のアイテムを含む行があり、すべてのアイテムの高さを最も高いアイテムの高さと同じにする必要があります。基本的に、このグリッドではすべてのアイテムの高さを同じにします。

<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>

セクションクラスの背景色はグレーであり、このサンドボックスに見られるように、セクションは行の高さを継承しないことがわかります。 https://codesandbox.io/s/1826lw51z

material-ui
18
user6388353

単にheight: 100%グリッド項目の子に。サンドボックスで提供したコードで、このプロパティをセクションクラスに追加します。

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

質問のコードサンプルはサンドボックスとは異なるため、JSXは次のようになります。

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

更新されたサンドボックスとデモの動作を次に示します。 https://codesandbox.io/s/m7r7jnzzlx

19
Imperator