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

Question

Je ne comprends pas 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 sur l'écran sur tous les appareils (mobiles et de bureau) ?

Answer 1

Puisque vous allez l'utiliser dans une page de connexion. Voici un code que j'ai utilisé dans une page de connexion en utilisant Material-UI

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

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

</Grid> 

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

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

J'espère que cela vous aidera.

Answer 2

Une autre option est :

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

Answer 3

Voici une autre option sans grille :

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

Answer 4

La version de @Nadun n'a pas fonctionné pour moi, le dimensionnement ne fonctionnait pas bien. J'ai supprimé le direction="column" ou le changer en row Le site Web de l'Office de l'harmonisation dans le marché intérieur (OIT), qui aide à créer des formulaires d'ouverture de session verticaux avec une taille adaptée aux besoins.

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

Answer 5

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 Grid Item.

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

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

De plus, j'ai eu beaucoup de mal avec la grille matérielle, je vous suggère d'aller voir du côté de la flexbox qui est intégrée automatiquement dans les CSS et que vous n'avez pas besoin de paquets supplémentaires pour utiliser. C'est très facile à apprendre.

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