带有负边距的网格（顶部）打破了我的UI

Question

我有问题here的实时代码插图，正如您所看到的，h1和网格之间没有空格（我期待12px，因为我要求24px间距）。如果您打开控制台，您可以看到负边距将网格置于h1之上，这是我需要修复的内容。

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

我希望我们不必将h1封装在网格容器中＆gt;网格项本身。

Answer 1

spacing属性设置Grid items内Grid container之间的间距，而不是item和{{ 1}}边。因此，您最终得到：

contaianer

但是这些项目不会从容器的侧面偏移（当然取决于-------------------------- |---------- ----------| || item |<-->| item || |---------- ----------| | ^ ^ | | | | | | v v | |---------- ----------| || item |<-->| item || |---------- ----------| -------------------------- 和justify的值）。这是通过在项目中添加alignItems|Content和在容器中添加负数padding并调整容器margin来实现的。

最简单的方法是在标题样式中添加width，如图here所示。

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