将 MUI 网格嵌套在堆栈内，并留有间距

Question

将 MUI Grid（容器）嵌套在 MUI Stack（已spacing应用）内会导致边距样式出现问题。由于Stack自动“无效”应用于其子级的所有边距（以允许其自己的间距边距），并且Grid容器需要负边距才能正确布局，因此将两者一起使用会导致布局移位（主要是水平方向）。除了必须避免使用Stack带有间距的父级并将所述间距手动应用于所有子级之外，是否有一个好的方法来解决这个问题？这似乎是一个相对常见的用例，我希望找到一种方法来禁用Stack“无效”其子项的边距？

---

这不起作用，因为父网格Stack“无效”了子网格的负边距，以便应用其自己的间距边距（仅垂直）。

<Stack spacing={2}>
  <Grid container spacing={3}>
    <Grid item>...</Grid>
  </Grid>
  <Grid container>...</Grid>
  <WhateverElse />
</Stack>

.css-1lwbda4-MuiStack-root>:not(style)+:not(style){
  margin:0;margin-top:24px;
}

---

这是可行的，因为父级Stack没有指定spacing，这允许子级保留其边距（在 的情况下为负边距Grid）。

<Stack>
  <Grid container spacing={3}>
    <Grid item>...</Grid>
  </Grid>
  <Grid container>...</Grid>
  <WhateverElse />
</Stack>```