material-ui - 具有负边距(顶部)的网格破坏了我的用户界面

Question

我有问题的实时代码说明 here ，如您所见，h1 和 Grid 波纹管之间没有空间(我期望 12px，因为我要求 24px 的间距)。如果您打开控制台，您可以看到负边距将 Grid 置于 h1 上方，这就是我需要修复的。

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

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

Answer 1

spacing属性设置 Grid 之间的间距items内Grid container ，但不在 item 之间和 contaianer边。所以，你最终得到:

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

但是项目不会从容器的侧面偏移(当然取决于 justify 和 alignItems|Content 值)。这是通过添加 padding 来实现的。到项目和负 margin到容器并调整容器 width .

最简单的方法是添加 marginBottom到如图所示的标题样式 here .

由于负边距和宽度操作，嵌套 Grid容器可能很棘手，尽管有一些 recommendations for how to deal with it .为了精细控制，我经常设置 spacing={0}并使用 MUI spacing API嵌套时实现项之间的间距 Grid s。