MUI v5中为特定元素自定义滚动条样式的问题

以下是几个可行的解决方向：

1. 给Box设置明确的尺寸限制 #

滚动条仅在容器内容超出自身尺寸时才会显示，若Box没有固定高度/宽度或最大高度/宽度，overflow: auto不会触发滚动条，样式自然无法生效。修改示例：

<Box sx={{
  height: '300px', // 必须设置固定高度或最大高度
  overflow:"auto",
  scrollbarWidth: 'thin',
  '&::-webkit-scrollbar': {
    width: '0.4em',
  },
  '&::-webkit-scrollbar-track': {
    background: "#f1f1f1",
  },
  '&::-webkit-scrollbar-thumb': {
    backgroundColor: '#888',
  },
  '&::-webkit-scrollbar-thumb:hover': {
    background: '#555'
  }
}}>
  {/* 放入超出容器高度的内容 */}
</Box>

2. 使用styled组件替代内联sx样式 #

内联sx对伪元素的样式优先级支持存在局限，改用styled创建自定义组件能更可靠地应用滚动条样式：

import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';

const ScrollableBox = styled(Box)(({ theme }) => ({
  overflow: 'auto',
  scrollbarWidth: 'thin',
  '&::-webkit-scrollbar': {
    width: '0.4em',
  },
  '&::-webkit-scrollbar-track': {
    background: "#f1f1f1",
  },
  '&::-webkit-scrollbar-thumb': {
    backgroundColor: '#888',
    borderRadius: theme.shape.borderRadius, // 可选：统一应用主题圆角
  },
  '&::-webkit-scrollbar-thumb:hover': {
    background: '#555'
  },
  height: '300px', // 需设置尺寸触发滚动
}));

// 使用自定义组件
<ScrollableBox>
  {/* 内容 */}
</ScrollableBox>

3. 规避全局样式优先级冲突 #

若项目中存在全局滚动条样式，可能会覆盖Box的局部样式。可以给Box添加自定义类名，用更高优先级的选择器定义样式：

// 组件代码
<Box className="custom-scroll-box" sx={{ height: '300px', overflow: 'auto' }}>
  {/* 内容 */}
</Box>

// 全局CSS文件
.custom-scroll-box {
  scrollbar-width: thin;
}
.custom-scroll-box::-webkit-scrollbar {
  width: 0.4em;
}
.custom-scroll-box::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.custom-scroll-box::-webkit-scrollbar-thumb {
  background-color: #888;
}
.custom-scroll-box::-webkit-scrollbar-thumb:hover {
  background: #555;
}

4. 检查MUI版本兼容性 #

旧版MUI对sx内伪元素样式的支持不完善，建议将@mui/material升级到v5.8.0及以上版本，能更好地兼容此类样式设置。

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