如何在 Material UI 中的字段之间留出空间？

Question

我是 Material UI 的新手，我的目标是在每个文本字段之间留出空格，我已经留出了空格，但它不起作用。谁能帮助我在文本字段之间留出空间？

这是代码：

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}>&nbsp; <Grid item>&nbsp; &nbsp; <TextField label="First Name" variant="outlined" />&nbsp; </Grid>&nbsp; <Grid item>&nbsp; &nbsp; <TextField label="Last Name" variant="outlined" />&nbsp; </Grid>&nbsp; <Grid item>&nbsp; &nbsp; <TextField label="Address" variant="outlined" />&nbsp; </Grid>&nbsp; <Grid item>&nbsp; &nbsp; <TextField label="Email" variant="outlined" />&nbsp; </Grid></Grid>如果你在浏览器开发者模式下查看dom结构，你会发现空间已经解决了。并且各个字段之间的空格是相等的，之所以显示不同是因为有外部元素。