ReactJS Материал UI выравнивание центра поля формы - PullRequest
Новая
       22

ReactJS Материал UI выравнивание центра поля формы

0 голосов
/ 21 октября 2019

У меня возникают проблемы с выравниванием формы реагирования по центру.

Это моя форма:

Я использую реагирующий материал UI 

 <Grid item xs={12}>
          <Grid item xs={12}>

            <FormGroup noValidate autoComplete="on">
              <TextField
                label="SSN"
                type="number"
                className={classes.textField}
                name='ssn'
              />
            </FormGroup>

          </Grid>
      </Grid>

iя пытаюсь выровнять форму по центру.

Если вы хотите увидеть весь компонент, это компонент, содержащий форму 

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import useStyles from '../src/styleMaker'
import { connect } from "react-redux";
import { FormGroup } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';


function App(props) {
  const useStyles = makeStyles(theme => ({
    container: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    textField: {
      marginLeft: theme.spacing(1),
      marginRight: theme.spacing(1),
      width: 200,
    },
  }));
  const classes = useStyles();


  return (

    <React.Fragment>
    <div className={classes.container}>

        <Grid item xs={12}>
          <Grid item xs={12}>

            <FormGroup noValidate autoComplete="on">
              <TextField
                label="SSN"
                type="number"
                className={classes.textField}
                name='ssn'
              />
            </FormGroup>

          </Grid>
      </Grid>

    </div>

    </React.Fragment>

  );
}

export default App;

Может кто-нибудь помочь мне сделать эту форму по центру? Я пробовал весь день, но не смог выровнять.

1 Ответ

0 голосов
/ 21 октября 2019

  1. Если вы используете для центрирования формы по горизонтали, добавьте следующий стиль к makeStyles

    formGroup: {
  alignItems: 'center'
}

    и присвойте formGroup имя класса <FormGroup>

    <FormGroup className={classes.formGroup} noValidate autoComplete="on">
    <TextField
        label="SSN"
        type="number"
        className={classes.textField}
        name='ssn'
    />
</FormGroup>

    Вот рабочая форма

  2. Если вы хотите отцентрировать его по вертикали и горизонтали, самый простой способ - сделать корень <div> расположенным абсолютно иустановите width и height на 100%. Это заставляет <div> занимать весь экран. Затем вы можете использовать justify-content и align-items для центрирования формы. 

    container: {
  display: "flex",
  flexWrap: "wrap",
  position: "absolute",
  top: 0,
  left: 0,
  height: "100%",
  width: "100%",
  alignItems: "center"
},

    Вот рабочая форма , которая выровнена по центру как по горизонтали, так и по вертикали

...