it-swarm.dev

Wie kann eine Komponente in der Material-UI zentriert und reaktionsschnell gemacht werden?

Ich verstehe das React Material-UI grid system nicht ganz. Wenn ich eine Formularkomponente für die Anmeldung verwenden möchte, wie kann ich sie auf allen Geräten (Mobilgeräten) am einfachsten auf dem Bildschirm zentrieren? und Desktop)?

19
zorro

Da Sie dies in einer Anmeldeseite verwenden werden. Hier ist ein Code, den ich auf einer Anmeldeseite mit Material-UI verwendet habe

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

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

</Grid> 

dadurch wird dieses Anmeldeformular in der Mitte des Bildschirms angezeigt.

Trotzdem unterstützt IE das Material-UI Grid nicht und Sie werden einige verlegte Inhalte im IE sehen.

Hoffe das wird dir helfen.

36
Nadun

Eine andere Option ist:

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

Die @ Nadun-Version hat bei mir nicht funktioniert, die Größenanpassung hat nicht gut funktioniert. Das Entfernen des direction="column" Oder das Ändern in row hilft beim Erstellen vertikaler Anmeldeformulare mit reaktionsschneller Größenanpassung.

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

Hier ist eine weitere Option ohne Gitter:

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

Alles, was Sie tun müssen, ist, Ihren Inhalt in ein Grid-Container-Tag einzubinden, den Abstand festzulegen und dann den eigentlichen Inhalt in ein Grid-Item-Tag einzubinden.

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

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

Außerdem habe ich viel mit dem Materialraster zu tun. Ich schlage vor, Sie checken flexbox, das automatisch in CSS integriert wird, und Sie brauchen keine zusätzlichen Pakete, um es zu verwenden. Es ist sehr einfach zu erlernen.

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

0
Gavin Thomas