[英]Material-UI Masonry: Remove space on right side
使用 Material-UI,砌体组件的宽度不会填满父容器的宽度。 这个缺失空间的宽度正好是间距的宽度,如果它旁边有一个元素,这是有道理的。
我试图将砌体的宽度计算为 Box 元素的宽度加上 8 * 间距,但是一旦涉及滚动条,就会中断。
如何将容器的全宽用于砌体?
mwe(只是文档中的一个示例,顶部添加了一个 Box):
const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
const Item = styled(Paper)(({ theme }) => ({
...theme.typography.body2,
color: theme.palette.text.secondary,
border: '1px solid black',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}));
<Container>
<Box style={{ border: '1px solid black', padding: '20px' }}>
<Typography variant="h5">
An Element to show the width of the contianer
</Typography>
</Box>
<Box style={{ marginTop: '20px' }}>
<Masonry columns={4} spacing={4}>
{heights.map((height, index) => (
<Item key={index} sx={{ height }}>
{index + 1}
</Item>
))}
</Masonry>
</Box>
</Container>
MWE 的屏幕截图。 缺失区域标记为红色:
您可以通过设置marginRight
来解决这个问题,并在sx
道具中否定您的砌体间距。
<Box sx={{ marginTop: '20px', marginRight: -4 }}>
{/* Masonry code */}
</Box>
我只是通过将 Masonry 组件宽度从“100%”更改为“auto”来修复它,我不知道为什么,但效果很好。
<Masonry columns={4} spacing={4} sx={{ width: "auto" }}>
{* Masonry items *}
</Masonry>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.