React Material UI单行ImageList如何移除横向滚动条

问题原因 #

Material UI 的 ImageList 组件默认内置overflow-x: auto样式，当子项总宽度超出容器宽度时会自动出现横向滚动条，你在外层容器设置的overflow: hidden仅能控制外层容器的溢出行为，无法作用于 ImageList 本身的滚动条。

解决方案 #

根据你的使用场景二选一修改useStyles中的imageList样式即可：

方案1：内容超出直接截断，不支持横向滚动 #

直接给ImageList添加横向溢出隐藏属性：

const useStyles = makeStyles((theme) => ({
  // 其余样式保持不变
  imageList: {
    flexWrap: 'nowrap',
    // 在Chrome中将该列表提升至独立图层，消耗部分内存但有助于保持高帧率
    transform: 'translateZ(0)',
    overflowX: 'hidden', // 新增这行即可
  },
}));

方案2：保留横向滚动能力，仅隐藏滚动条视觉效果 #

添加多浏览器兼容的滚动条隐藏样式：

const useStyles = makeStyles((theme) => ({
  // 其余样式保持不变
  imageList: {
    flexWrap: 'nowrap',
    // 在Chrome中将该列表提升至独立图层，消耗部分内存但有助于保持高帧率
    transform: 'translateZ(0)',
    // 以下为新增的滚动条隐藏样式
    '&::-webkit-scrollbar': {
      display: 'none'
    },
    msOverflowStyle: 'none',
    scrollbarWidth: 'none'
  },
}));

额外优化建议 #

你当前给ImageList设置的cols={1.3}意味着一行只能展示1.3个项，如果你需要所有图片都在单行内完整展示无需滚动，可以根据你放置的图片数量调整cols值，比如示例中有3张图就改为cols={3}，这样3张图会自动平分容器宽度，不会出现溢出。

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