javascript - Material-UI Masonry : Remove space on right side

Question

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

我试图将 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%”更改为“自动”来修复它， 我不知道为什么，但效果很好。

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