web-dev-qa-db-ja.com

Material-UIでコンポーネントを中央に配置して応答性を高める方法は？

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

reactjsmobileloginmaterial-uidesktop
19
zorro

これはログインページで使用するためです。 Material-UIを使用してログインページで使用したコードを次に示します。

<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でコンテンツの配置が間違っていることがわかります。

これがお役に立てば幸いです。

36
Nadun

別のオプションは次のとおりです。

<Grid container justify = "center">
  <Your centered component/>
</Grid>
6
Max

@Nadunのバージョンは私にとっては機能せず、サイジングはうまく機能しませんでした。 direction="column"を削除するかrowに変更すると、レスポンシブサイジングで垂直ログインフォームを構築するのに役立ちます。

<Grid
        container
        spacing={0}
        alignItems="center"
        justify="center"
        style={{ minHeight: '100vh' }}
      >
  <Grid item xs={6}>
  </Grid>
</Grid>
2
Onur Yıldırım

グリッドなしの別のオプションを次に示します。

<div
    style={{
        position: 'absolute', 
        left: '50%', 
        top: '50%',
        transform: 'translate(-50%, -50%)'
    }}
>
    <YourComponent/>
</div>
2
Jöcker

必要なことは、コンテンツをグリッドコンテナタグ内にラップし、間隔を指定してから、実際のコンテンツをグリッドアイテムタグ内にラップすることです。

 <Grid container spacing={24}>
    <Grid item xs={8}>
      <leftHeaderContent/>
    </Grid>

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

また、マテリアルグリッドに苦労しました。CSSに自動的に組み込まれるflexboxをチェックアウトすることをお勧めします。使用するために追加のパッケージは必要ありません。とても簡単に習得できます。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

0
Gavin Thomas