反应:如何让材质UI的网格间距起作用?

只是有内容在里面 <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

当您使用 xs or sm ,上面的填充将在上面,所以您将得到上面的底部填充