React：如何让 Material UI 网格间距起作用？答案

【问题标题】：React: how to get Material UI's grid spacing to work?React：如何让 Material UI 网格间距起作用？
【发布时间】：2020-02-26 04:33:19
【问题描述】：

我正在使用 Material UI 的 Grid (https://material-ui.com/api/grid) 进行布局，但是当列和行正常工作时，spacing 属性似乎不起作用。

我已经导入了这样的网格：import Grid from '@material-ui/core/Grid'

  <Grid container spacing={10}>
    <Grid item xs={12} sm={6}>
      CONTENT
    </Grid>
    <Grid item xs={12} sm={6}>
      CONTENT
    </Grid>
  </Grid>

但没有出现填充。

有人知道如何在网格中包含间距吗？

【问题讨论】：

spacing 的有效值为 0 到 10 (material-ui.com/api/grid/#grid-api)。 16 不是有效值。
@RyanCogswell 哎呀，这是我的问题中的一个错字。应该是 10 岁（我仍然有同样的问题）
@MeltingDog 你能提供这个问题的codepen演示吗？

标签： javascript css reactjs material-ui

【解决方案1】：

对我来说，问题是我没有将项目用于网格项目。

<Grid container spacing={3}>
    <Grid item xs={12}></Grid>
    <Grid item xs={12}></Grid>
</Grid>

【讨论】：

同样的事情发生在我身上。忘记使用“项目”属性。通过添加它们，间距就像一个魅力。谢谢。

【解决方案2】：

仅在 <Grid> 中包含内容是行不通的，但如果将其放入 <div> 或 <Paper> 中，您将获得所需的内容...

相关js：

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  grid: {
    textAlign: "center",
    color: theme.palette.text.secondary
  },
  span: {
    border: "1px solid pink",
    backgroundColor: "lightpink`"
  },
  span2: {
    border: "1px solid green",
    backgroundColor: "lightgreen"
  },
  span3: {
    border: "1px solid blue",
    backgroundColor: "lightblue"
  },
}));

const App = () => {
  var classes = useStyles();

  return (
    <div className={classes.root}>
      <Hello name="React" />
      <p>Start editing to see some magic happen :)</p>
      <br />
      <Grid container spacing={10}>
        <Grid item xs className={classes.grid}>
          <div className={classes.span}>CONTENT</div>
        </Grid>
        <Grid item xs className={classes.grid}>
          <div className={classes.span}>CONTENT</div>
        </Grid>
      </Grid>
      <hr />
      <Grid container spacing={8}>
        <Grid item xs className={classes.grid}>
          <div className={classes.span2}>CONTENT</div>
        </Grid>
        <Grid item xs className={classes.grid}>
          <div className={classes.span2}>CONTENT</div>
        </Grid>
      </Grid>
      <hr />
      <Grid container spacing={6}>
        <Grid item xs className={classes.grid}>
          <div className={classes.span3}>CONTENT</div>
        </Grid>
        <Grid item xs className={classes.grid}>
          <div className={classes.span3}>CONTENT</div>
        </Grid>
      </Grid>
    </div>
  );
};

示例stackblitz here

【讨论】：

【解决方案3】：

我在 Grid 组件上使用 sx 属性时遇到了这个问题。请务必仅在 Grid 组件的子级上放置任何自定义样式。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

网格间距用作填充，当您使用xs or sm 时，填充将覆盖顶部，因此您将获得顶部底部填充

【讨论】：