[解決済み] MUIでコンポーネントをセンタリングし、レスポンシブにするには？

質問

ReactのMaterial-UIグリッドシステムをよく理解していません。ログイン用のフォームコンポーネントを使用したい場合、すべてのデバイス（モバイルとデスクトップ）でそれを画面の中央に配置する最も簡単な方法は何ですか？

どのように解決するのですか？

ログインページで使用するのですから。 以下は、Material-UIを使用したログインページで使用したコードです。

MUI v5

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justifyContent="center"
  style={{ minHeight: '100vh' }}
>

  <Grid item xs={3}>
   <LoginForm />
  </Grid>   
   
</Grid> 

MUI v4 およびそれ以下

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justify="center"
  style={{ minHeight: '100vh' }}
>

  <Grid item xs={3}>
    <LoginForm />
  </Grid>   

</Grid> 

とすると、このログインフォームが画面の中央に表示されます。

しかし、やはりIEはMaterial-UI Gridに対応していないので、IEではコンテンツの位置がずれてしまうことがあるようです。

maxさんのご指摘の通り、もう一つの選択肢は。

<Grid container justifyContent="center">
  <Your centered component/>
</Grid>

MUIv4 およびそれ以下のバージョンでは、代わりに justify="center" を使用する必要があることに注意してください。

しかし、グリッドアイテムなしでグリッドコンテナを使用することは、文書化されていない動作です。

これがあなたの助けになることを願っています。