如何在 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}>
  <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 Material UI Grid 中具有不同的水平和垂直间距