英文:
Problem with spacing of Grid at Material UI 5
问题
因某种原因，MUI5 Grid的间距行为出现问题。
它没有为项目之间提供间距，项目会重叠在容器上。
实时示例链接：https://codesandbox.io/s/green-worker-z44vds?file=/index.js
英文:
For some reason, MUI5 Grid got the wrong behavior of spacing.
It doesn't provide me a spacing between items and items overlapping containers.
Link to live example: https://codesandbox.io/s/green-worker-z44vds?file=/index.js
答案1
得分: 1
间距在使用开发者工具检查网格元素时表现正常。问题在于在<Grid container>上有一个bgcolor="lightblue"，它覆盖了整个网格容器，因此你将无法从单独的网格项目中看到任何间距。
使用以下网格，你将能够看到网格间距正常工作，这只是一个颜色问题。
<Grid container height="60px" spacing={2}>
<Grid item xs={3}>
<Box bgcolor="lightblue" height="100%" width="100%">
1
</Box>
</Grid>
<Grid item xs={3}>
<Box bgcolor="lightblue" height="100%" width="100%">
2
</Box>
</Grid>
<Grid item xs={3}>
<Box bgcolor="lightblue" height="100%" width="100%">
3
</Box>
</Grid>
<Grid item xs={3}>
<Box bgcolor="lightblue" height="100%" width="100%">
4
</Box>
</Grid>
</Grid>
英文:
The spacing works just fine if you inspect the grid elements using the devtools. The problem is that you have a bgcolor="lightblue" on the <Grid container> which cover the whole grid container and thus you will not see any spacing from the individual grid items.
Using the following grid you'll be able to see that the grid spacing works fine and it was just a color issue.
<Grid container height="60px" spacing={2}>
<Grid item xs={3}>
<Box bgcolor="lightblue" height="100%" width="100%">
1
</Box>
</Grid>
<Grid item xs={3}>
<Box bgcolor="lightblue" height="100%" width="100%">
2
</Box>
</Grid>
<Grid item xs={3}>
<Box bgcolor="lightblue" height="100%" width="100%">
3
</Box>
</Grid>
<Grid item xs={3}>
<Box bgcolor="lightblue" height="100%" width="100%">
4
</Box>
</Grid>
</Grid>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论