如何使用Material-UI Grid进行SPA（负边距问题）

我试图只使用Grid创建一个SPA。我已经习惯了material-uiGrid并经常使用它，但是在我的新项目中我不确定我做错了什么。

现在这就是问题所在：

右侧有一个边距和一个水平滚动条。

我知道负边距限制，但如果我对父元素应用填充（如文档所述），那么我的Grid元素失去全宽功能：

水平滚动条消失了，但是我的元素上有一个填充，如果我设置了一个background color在这些元素之一中，它不适用于整个宽度，因为有填充。

使用overflow-x: hidden添加了第二个垂直滚动条，似乎我必须垂直滚动两次才能滚动页面。

唯一的解决方案是使用Grid spacing={0}，但是我没有得到部分之间的间距和Grid部分内的容器也不能使用spacing.

我正在实现的示例在此代码和框中：https://codesandbox.io/s/competent-volhard-e5yls?file=/src/App.js https://codesandbox.io/s/competent-volhard-e5yls?file=/src/App.js

我的疑问是，只有一个页面和分隔它的部分的最佳解决方案是什么。理想情况下使用 Material-ui 组件之一。

多谢！

将其添加到根样式以删除水平滚动条和边距。 Material UI 添加了额外的元素来实现其样式，因此使用开发人员工具来找出可能模糊您的 css 规则的内容可能是一个好主意。在本例中，根 div 下面的 div 需要删除其边距并保持全宽。

root: {
  display: "flex",
  flexGrow: 1,
  "& > div": {
    width: "100vw",
    margin: "0"
  }
}

https://codesandbox.io/s/blue-dew-gpxy2?file=/src/App.js:279-318 https://codesandbox.io/s/blue-dew-gpxy2?file=/src/App.js:279-318

也许可以阅读有关 MUI 样式 API 以及如何使用嵌套样式和规则的更多信息。