React：如何让 Material UI 的网格间距发挥作用？

Question

我正在使用 Material UI 的网格（https://material-ui.com/api/grid）进行布局，但是虽然列和行工作正常，但该spacing属性似乎不起作用。

我已经这样导入了 Grid：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>

但没有出现填充。

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

Answer 1

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

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

Answer 2

仅将内容放在 a 中<Grid>是行不通的，但是如果将其放入 a<div>或 a中<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 在这里