Реактив сделать компоненты Показать в столбце

Question

Я довольно новичок в React , и я делаю свое первое приложение, используя material-ui , и мне удалось отобразить нужные мне компоненты, но я этого не сделалудалось распечатать их в стопке, они показывают в строке:

Я пытался обернуть их с div и p , и я получаю тот же результат.

Это код моего компонента:

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import InputAdornment from '@material-ui/core/InputAdornment';
import FormControl from '@material-ui/core/FormControl';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import IconButton from '@material-ui/core/IconButton';

const styles = theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  margin: {
    margin: theme.spacing.unit,
  },
  withoutLabel: {
    marginTop: theme.spacing.unit * 3,
  },
  textField: {
    flexBasis: 200,
  },
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});

class LoginModal extends Component {
  state = {
    password: '',
    showPassword: false,
  };

  render() {
    const { classes } = this.props

    return (
      <div className={classes.root}>
        <h1>Welcome to My App...</h1>
        <FormControl className={classNames(classes.margin, classes.textField)}>
          <InputLabel htmlFor="adornment-email">eMail</InputLabel>
          <Input i
            d="adornment-email"
            variant="filled"
          />
        </FormControl>
        <FormControl className={classNames(classes.margin, classes.textField)}>
          <InputLabel htmlFor="adornment-password">Password</InputLabel>
          <Input
            id="adornment-password"
            variant="filled"
            type={this.state.showPassword ? 'text' : 'password'}
            value={this.state.password}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  aria-label="Toggle password visibility"
                  onClick={this.handleClickShowPassword}
                >
                  {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
                </IconButton>
              </InputAdornment>
            }
          />
          <p><a href="#">Did you forget your password?</a></p>
          <Button color="primary" variant="contained">Login</Button>
        </FormControl>
      </div>
    );
  };
}

LoginModal.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(LoginModal);

Только два последних компонента отображаются в стеке, но остальные отображаются в строке.

Как я могу дать React отображение компонентов в стопке?

Answer 1

Я обнаружил, что Material-UI использует Сетка компонентов для управления отзывчивостью, и вы можете использовать его для упорядочения отображаемых объектов.

Вот как я использовал Сетка для отображения моих объектов так, как я хотел:

class LoginModal extends Component {
  state = {
    password: '',
    showPassword: false,
  };

  render() {
    const { classes } = this.props

    return (
      <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={12}>
            <h1>Welcome to My App...</h1>
          </Grid>
          <Grid item xs={12}>
            <FormControl className={classNames(classes.margin, classes.textField)}>
              <InputLabel htmlFor="adornment-email">eMail</InputLabel>
              <Input
                id="adornment-email"
                variant="filled"
              />
            </FormControl>
          </Grid>
          <Grid item xs={12}>
            <FormControl className={classNames(classes.margin, classes.textField)}>
              <InputLabel htmlFor="adornment-password">Password</InputLabel>
              <Input
                id="adornment-password"
                variant="filled"
                type={this.state.showPassword ? 'text' : 'password'}
                value={this.state.password}
                endAdornment={
                  <InputAdornment position="end">
                    <IconButton
                      aria-label="Toggle password visibility"
                      onClick={this.handleClickShowPassword}
                    >
                      {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
                    </IconButton>
                  </InputAdornment>
                }
              />
              <p><a href="#">Did you forget your password?</a></p>
              <Button color="primary" variant="contained">Login</Button>
            </FormControl>
          </Grid>
        </Grid>
      </div>
    );
  };
}

И вот результат:

Answer 2

обновить стиль root до:

root: {
  display: 'flex',
  flex-direction: column;
},

вам может понадобиться настроить другие свойства flex, чтобы получить желаемое выравнивание.