Как дать пространство между полями в пользовательском интерфейсе материала?

Question

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

Вот код:

import React from "react";
import Grid from "@material-ui/core/Grid";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1),
      width: "25ch"
    }
  }
});

class TextFields extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <Grid>
        <form className={classes.root} noValidate autoComplete="off">
          <Grid item spacing={3}>
            <TextField label="First Name" variant="outlined" />
          </Grid>
          <Grid item spacing={3}>
            <TextField label="Last Name" variant="outlined" />
          </Grid>
          <Grid item spacing={3}>
            <TextField label="Address" variant="outlined" />
          </Grid>
          <Grid item spacing={3}>
            <TextField label="Email" variant="outlined" />
          </Grid>
        </form>
      </Grid>
    );
  }
}
export default withStyles(styles)(TextFields);

"https://codesandbox.io/s/material-demo-kcn7d"

Answer 1

Некоторые точки уведомления

• Направление установлено на column
• Родительская сетка установлена ​​на container
• Добавить расстояние с помощью spacing

<Grid container direction={"column"} spacing={5}>
  <Grid item>
    <TextField label="First Name" variant="outlined" />
  </Grid>
  <Grid item>
    <TextField label="Last Name" variant="outlined" />
  </Grid>
  <Grid item>
    <TextField label="Address" variant="outlined" />
  </Grid>
  <Grid item>
    <TextField label="Email" variant="outlined" />
  </Grid>
</Grid>

---

---

Если вы посмотрите на структуру dom в режиме разработчика браузера, вы обнаружите, что пространство улажен. И пробелы равны между каждым полем, причина, по которой оно отличается, заключается в том, что есть внешние элементы.

Попробуйте онлайн:

---

Соответствующий QA: Как иметь разное расстояние по горизонтали и вертикали в ReactJs Материал UI Grid