为什么我的 Gatsby/Material-UI 站点呈现的比视口略大？

Question

我使用Gatsby/MUI starter 作为我个人网站的样板。在我的个人网站中，我遇到的问题是所有页面都呈现为略大于视口大小。这个问题在移动和笔记本电脑/台式机大小的屏幕上是一致的。

我正在使用 MUI 网格。我确保我的元视口头部元素使用width=device-width。据我所知，这不依赖于固定大小的元素或网格间距选项，例如边距或填充。

是否有人有任何调试建议，或者是否有人希望查看有助于调试过程的特定信息？网址为https://errcsool.com

My code is available here

更新：如果我删除除索引之外的所有页面，只要我在 MUI 中放置一些带有间距选项<Grid container spacing={x}>的东西就会出现这个问题@

Answer 1

解决了。添加具有至少一半间距像素的div 根元素padding，因此对于spacing={8}，根div 应该具有padding={32}。

This is well-known functionality of Material-UI Grid.

与this issue相关。