MUI Masonry无限滚动场景下滚动条无法隐藏问题求助

问题根源 #

React内联样式不支持CSS伪类/伪元素选择器，你之前写在masonryContainerStyles里的::-webkit-scrollbar实际上从未生效——只是当时内容未达到滚动阈值，滚动条没显现而已。添加数组加载逻辑后内容增多触发滚动，滚动条就暴露出来了，之前的隐藏方法根本没起作用。

解决方案 #

用MUI的styled工具创建带滚动条隐藏样式的容器组件，替代内联样式：

关键代码修改 #

1. 替换原内联样式容器，改用styled组件：

// 移到Item组件定义之前，避免变量未定义报错
const borderRadiusValue = '20px';

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  textAlign: 'center',
  color: theme.palette.text.secondary,
  boxSizing: 'border-box',
  lineHeight: 0,
  borderRadius: borderRadiusValue,
}));

// 创建带滚动条隐藏样式的容器组件
const MasonryContainer = styled(Box)(({ theme, maxHeight }) => ({
  maxHeight: maxHeight,
  overflowY: 'auto',
  width: '100%',
  padding: '1em',
  borderRadius: '15px',
  '&::-webkit-scrollbar': {
    display: 'none'
  },
  msOverflowStyle: 'none',
  scrollbarWidth: 'none'
}));

2. 在content中使用新容器：

const content = (
  <MasonryContainer maxHeight={maxHeightValue}>
    <Masonry columns={columns} spacing={0}>
      {/* 原有图片/视频渲染逻辑保持不变 */}
    </Masonry>
  </MasonryContainer>
);

额外说明 #

• 移除原来的masonryContainerStyles变量，避免样式冲突
• 确保maxHeightValue通过props正确传递给MasonryContainer
• 检查borderRadiusValue的定义位置，必须在Item组件之前，否则会因变量未定义报错

内容的提问来源于stack exchange，提问作者Isaiahm