Material-UI Masonry：删除右侧的空间

Question

使用 Material-UI，Masonry 组件的宽度不会填充父容器的宽度。这个缺失空间的宽度正是间距的宽度，如果它旁边有一个元素，这是有意义的。

我尝试将砌体的宽度计算为 Box 元素的宽度加上 8 * 间距，但是一旦涉及滚动条，这种情况就会中断。

如何使用 Masonry 容器的整个宽度？

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 的屏幕截图。缺失区域以红色标记：

Answer 1

我只需将 Masonry 组件宽度从“100%”更改为“auto”即可修复此问题，我不知道为什么，但效果很好。

<Masonry columns={4} spacing={4} sx={{ width: "auto" }}>
  {* Masonry items *}
</Masonry>

Answer 2

您可以通过设置道具marginRight中砖石间距的否定来解决此问题sx。

<Box sx={{ marginTop: '20px', marginRight: -4 }}>
   {/* Masonry code */}
</Box>