如何移除MUI Grid组件右侧多余的边距/空白？

问题根源 #

MUI Grid的spacing属性实现逻辑是：给container元素添加负margin，同时给内部的item元素添加等宽的正向padding，以此实现子元素之间的均匀间距。你当前的代码嵌套了多层Grid container，不同层级的负margin和padding计算叠加后，就会出现右侧的额外空白，仅修改单层的margin样式无法解决问题。

解决方案 #

下面两种方案任选其一即可：

• 方案1：移除外层Grid多余的spacing配置
  你外层的Grid container设置的spacing={1}没有实际作用，内层每一行的Grid container已经通过spacing={3}控制了子项间距，直接删除外层的spacing属性即可：

return (
  <div className={classes.root}>
    {/* 删掉原来的spacing={1} */}
    <Grid container>
      <Grid container item xs={12} spacing={3}>
        <FormRow />
      </Grid>
      <Grid container item xs={12} spacing={3}>
        <FormRow />
      </Grid>
      <Grid container item xs={12} spacing={3}>
        <FormRow />
      </Grid>
    </Grid>
  </div>
);

• 方案2：给外层容器添加溢出隐藏
  如果需要保留外层的spacing设置，直接修改root样式，截断溢出的多余空白即可：

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: "lightblue",
    overflow: "hidden" // 新增该行即可
  },
  paper: {
    padding: theme.spacing(1),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
}));

内容的提问来源于stack exchange，提问作者vendrediSurMer