web-dev-qa-db-fra.com

Comment centrer un composant dans Material-UI et le rendre réactif?

Je ne comprends pas très bien le système de grille React Material-UI. Si je veux utiliser un composant de formulaire pour la connexion, quel est le moyen le plus simple de le centrer à l'écran sur tous les appareils (mobiles et ordinateurs de bureau)?

reactjsmobileloginmaterial-uidesktop
19
zorro

Depuis que vous allez utiliser cela dans une page de connexion. Voici un code que j'ai utilisé dans une page de connexion à l'aide de Material-UI

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

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

</Grid>

cela fera de ce formulaire de connexion au centre de l'écran.

Mais toujours IE ne prend pas en charge la grille Material-UI et vous verrez du contenu égaré dans IE.

J'espère que cela vous aidera.

36
Nadun

Une autre option est:

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

La version de @ Nadun ne fonctionnait pas pour moi, le dimensionnement ne fonctionnait pas bien. Suppression de direction="column" ou modification de row, aide à la création de formulaires de connexion verticaux avec dimensionnement réactif.

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

Voici une autre option sans grille:

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

Tout ce que vous avez à faire est d’envelopper votre contenu dans une balise Grid Container, de spécifier l’espacement, puis d’envelopper le contenu réel dans une balise Elément de grille.

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

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

De plus, je me suis beaucoup battu avec la grille de matériaux, je vous suggère donc de valider flexbox, qui est automatiquement intégré à CSS et vous n'avez pas besoin de packages supplémentaires à utiliser. C'est très facile à apprendre.

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

0
Gavin Thomas