Форма React Material-UI делает вертикальный и отзывчивый - PullRequest
Новая
       12

Форма React Material-UI делает вертикальный и отзывчивый

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

Я изучаю React Material-UI и пишу форму, но форма теперь горизонтальная. Мне нужно это вертикально.

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

      <Grid item xs={12}>
          <form className={classes.container} noValidate autoComplete="on">
            <TextField
              id=""
              label="SSN"
              value={values.ssn}
              onChange={handleChange('ssn')}
              type="number"
              className={classes.textField}
              name='ssn'
            />
            <TextField
              id=""
              label="Phone"
              value={values.phone}
              onChange={handleChange('phone')}
              type="number"
              className={classes.textField}
              name='phone'
            />
            <TextField
              id=""
              label="Email"
              value={values.email}
              onChange={handleChange('email')}
              type="email"
              className={classes.textField}
              name='email'
            />

            <Button
              onClick={() => onSubmit()}
              variant="contained"
              color="primary"
              size="small"
              className={classes.button}
            >
              Save
            </Button>
          </form>
        </Grid>

Я хочу, чтобы форма была вертикальной, а не горизонтальной.

Текущая форма:

Скриншот текущей формы . Но мне это не нравится;Мне это нужно вертикально. Как я могу сделать это вертикально?

1 Ответ

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

Вам необходимо добавить

направление контейнера = "столбец"

к сетке и поместить форму вне сетки.

Документы: https://material -ui.com / Components / Grid / # Interactive

Пример: 

    <form noValidate autoComplete="on">
      <Grid container direction="column" >
      ....
      </Grid>
    </form>

Образцы кодов и коробка:

https://codesandbox.io/s/silly-noether-lw9es

...