Css 如何使用材质ui网格在每个项目组件之间指定一列间距？

我对React的材料UI很陌生， 根据设计，我需要给出每个项目组件之间的一列间距（共12列）

例3列项目+1列间距+3列项目+1列间距+3列项目+1列间距

---

如何使用xs/lg等实现这一点，而不创建空列项目或边距填充，因为这将是静态的。

您将需要列偏移，就像引导网格一样，但它是按材质ui进行的。
在我看来，添加一个额外的列没有什么错，您可以将其事件包装到组件中：

function MyColumn({ children, ...rest }) {
  return (
    <React.Fragment>
      <Grid item {...rest}>
        {children}
      </Grid>
      <Grid item xs={1} />
    </React.Fragment>
  );
}

函数MyColumn（{children，…rest}）{
返回(
{儿童}
);
}

---

这种方法的问题是移动xs视图，在该视图中，它被转换为xs=12，在这里，我希望以不同的方式处理间距，即页边距顶部和底部。如果您希望根据视口宽度对组件进行不同的样式设置，则Material UI提供了一种方便的工具组件，称为Hidden：