具有负边距（顶部）的网格破坏了我的用户界面

Question

我在这里有一个关于这个问题的实时代码说明，正如你所看到的，h1 和下面的网格之间没有空间（我期望 12px，因为我要求 24px 的间距）。如果您打开控制台，您可以看到负边距将 Grid 置于 h1 上方，这就是我需要修复的。

我在这里做错了吗？如果我希望 h1 正确应用 24px 间距，正确的修补方法是什么？

我希望我们不必将 h1 封装在 Grid 容器 > Grid 项本身中。

Answer 1

该属性设置内部spacing之间的间距，但不设置和两侧之间的间距。所以，你最终会得到：Grid itemsGrid containeritemcontaianer

--------------------------
|----------    ----------| 
|| item   |<-->| item   ||
|----------    ----------|
|   ^              ^     | 
|   |              |     | 
|   v              v     | 
|----------    ----------| 
|| item   |<-->| item   ||
|----------    ----------| 
--------------------------

但这些物品并没有从容器的侧面偏移（当然取决于justify和值）。alignItems|Content这是通过padding向容器中添加物品和负片margin并调整容器来实现的width。

marginBottom最简单的方法是向标题样式添加 ，如下所示。

由于负边距和宽度操作，嵌套Grid容器可能会很棘手，尽管有一些关于如何处理它的建议。为了精细控制，我经常设置spacing={0}并使用MUI间距API来实现嵌套时项目之间的间距Grid。