Material-UI Masonry：移除右侧的空间答案

【问题标题】：Material-UI Masonry: Remove space on right sideMaterial-UI Masonry：移除右侧的空间
【发布时间】：2022-06-29 06:45:17
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs material-ui masonry

【解决方案1】：

您可以通过在 sx 属性中设置 marginRight 并否定您的砌体间距来解决此问题。

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

【讨论】：

我觉得自己好蠢。将边距添加到<Masonry> 不起作用，但显然它在 Box 上起作用

【解决方案2】：

我只是通过将 Masonry 组件宽度从“100%”更改为“auto”来修复它，我不知道为什么，但效果很好。

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

【讨论】：