如何在材料UI的字段之间留出空间？

Question

我是实体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结构，您会发现空间已固定。而且每个字段之间的间距是相等的，之所以显示不同，是因为存在外部元素。

在线尝试：

---

相关的质量检查：How to have different horizontal and vertical spacing in ReactJs Material UI Grid