material ui 中央揃えができない

Question

前提・実現したいこと

material uiを使って入力フォームを作成していましたが、フォームの中央揃えができません。
Gridを使いましたが思うように実装できませんでした。
解決方法をご存知の方、教えていただきたいです。

発生している問題・エラーメッセージ

ボタンは中央揃えできているがフォームの中央揃えができていない。

該当のソースコード

return (
    <React.Fragment>
          <Grid container spacing={3} alignItems="center" justify="center">
            <Grid item xs={12}>
              <TextField
                id="standard-basic"
                name="name"
                label="名前"
                value={values.name}
                onChange={handleInputChange}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                id="date"
                label="date"
                type="date"
                name="date"
                sx={{ width: 220 }}
                InputLabelProps={{
                  shrink: true,
                }}
                format="yyyy/MM/dd"
                value={values.date}
                onChange={handleInputChange}
              />
            </Grid>
            
            <Grid item>
              <Button
                variant="contained"
                color="secondary"
                startIcon={<SaveIcon />}
                onClick={submit}
              >保存する
              </Button>
              <Button
                variant="contained"
                color="primary"
                startIcon={<SaveIcon />}
                onClick={() => {
                  props.setFlag(false)
                }}
              >戻る
              </Button>
            </Grid>
          </Grid>
    </React.Fragment>
)

試したこと

Gridでcontanerとjustifyにcenterを与える
https://teratail.com/questions/98504

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

中央揃えができていないのではなく、中央揃えされたサイズ最大(xs={12})のGridの左端にテキストが来ているだけです。
justify="center"で中央揃えされるのは、containerの中身のGrid itemです。
試しにTextFieldにfullwidthをつけてみると、横幅いっぱいにTextFieldが伸びると思います。

"TextField自体を中央揃えされたように見せたい"のであれば、Grid itemのxs={12}を小さくしてください。
ただそれだと縦並びのレイアウトが崩れてしまいます。
一つの案としてコンテンツ全体を中央揃えにしたいのであれば、Containerというコンポーネントがあるのでそれで全体をラップしてください。
さらにContainerの中でも中央揃えにしたいのであれば、素直にクラスで指定してあげる。
もしくは、Grid containerのdirectionをcolumnにしてあげてalignItemsをcenterに設定する。

<Grid container direction="column" alignItems="center">
  <Grid item>
    <TextField />
  </Grid>
  <Grid item>
    <TextField />
  </Grid>
</Grid>

Comments

[退会済みユーザー]

回答いただきありがとうございます。

//試しにTextFieldにfullwidthをつけてみると、横幅いっぱいにTextFieldが伸びると思います。
こちら試してみたところTextFieldが横幅いっぱいになったことを確認できました。

最終的に、「Grid containerのdirectionをcolumnにしてあげてalignItemsをcenterに設定」で解決できました。

とてもわかりやすい解説もいただきありがとうございました。