Material-UI 砌体：删除右侧的 space

Question

使用Material-UI，Masonry 组件的宽度未填满父容器的宽度。这个缺的space的宽度正好是间距的宽度，如果旁边有元素的话才有意义

我试图将砌体的宽度计算为 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

您可以通过设置 marginRight 来解决此问题，并在 sx 道具中取消砌体间距。

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

Answer 2

我只是通过将 Masonry 组件宽度从“100%”更改为“自动”来修复它，我不知道它是否安全，但它对我有用。

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

Material-UI 砌体：删除右侧的 space

Material-UI Masonry: Remove space on right side

javascript

reactjs

material-ui

masonry