reactjs - Material-ui Card 组件的阴影和底部在 GridList 中被剪裁

Question

我正在尝试创建一个由 material-ui Cards 组成的网格使用 Grid List成分。但是，在我尝试将卡片放入其中时，底部和阴影被剪掉了。我认为这是一个非常简单的 css 问题，但我看不出有什么问题。这是沙箱:
https://codesandbox.io/embed/intelligent-wave-3gbzz?fontsize=14&hidenavigation=1&theme=light
在此图像中，您可以看到每张卡片的底部在与不同行上的其他卡片堆叠时如何剪裁。但是，如果您修改窗口大小，则其下方没有其他卡片的卡片将正确渲染底部。可以在沙箱链接中检查此行为。

Answer 1

如果您在开发人员工具中检查您的卡片，您会发现它没有任何喘息空间并且它使用 box-shadow特性。


box-shadow 配置为具有 2px作为其 offset-y ，所以你需要一些底边距

const useStyles = makeStyles((theme) => ({
  card: {
    maxWidth: 160,
    height: "100%",
    marginBottom: "2px" // or margin: "2px" so at least all sides are covered
  }
}));

引用: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow