Zenn
👋

【MUI】Gridアイテム内の要素を中央寄せする【React】

2023/07/12に公開
React
TypeScript
Material-UI
tech

概要

以下のように Grid コンポーネントを使用して要素を配置すると、

<Grid container direction="row">
  <Grid item xs={6} sx={{ marginTop: "15px" }}>
    <Typography>ラベル</Typography>
  </Grid>
  <Grid item xs={6}>
    <Button variant="contained">ボタン</Button>
  </Grid>
  <Grid item>
    <Typography>
      テキストテキストテキストテキストテキストテキストテキスト
      <br />
      テキストテキストテキストテキストテキストテキストテキスト
    </Typography>
  </Grid>
</Grid>

こんな感じで各要素が Grid アイテム内で左寄せされる
これを以下のようにしたい

こんな感じ

<Grid
  container
  direction="row"
  alignItems="center"
  justifyContent="space-between"
  spacing={2}
  sx={{ marginTop: "40px", marginBottom: "20px" }}
>
  <Grid item sx={{ marginTop: "15px" }}>
    <Typography>ラベル</Typography>
  </Grid>
  <Grid item>
    <Button variant="contained">ボタン</Button>
  </Grid>
  <Grid item>
    <Typography>
      テキストテキストテキストテキストテキストテキストテキスト
      <br />
      テキストテキストテキストテキストテキストテキストテキスト
    </Typography>
  </Grid>
</Grid>
  • justifyContent="space-between"を設定
  • Grid のアイテムに指定する xs={6}などの幅指定を外す
GitHubで編集を提案

Discussion