如何不直接使用opacity属性为滚动条轨道添加透明度效果

问题原因 #

WebKit内核浏览器本身不支持为::-webkit-scrollbar-track等滚动条相关伪元素设置opacity属性，所以该属性失效是浏览器限制，与Material UI的styled工具无关。

实现方案 #

可以使用Material UI内置的alpha工具函数直接给主题色添加透明度，无需依赖opacity属性，同时可以完美适配深浅色模式切换的主题一致性要求。

操作步骤 #

• 首先从Material UI样式工具中导入alpha函数

import { alpha } from '@mui/material/styles';

• 修改滚动条轨道的样式规则，删除原来的opacity配置，用alpha函数包裹主题色值，第二个参数传入需要的透明度数值即可

修改后完整代码 #

const Root = styled('div')(({ theme }) => ({
    display: 'flex',
    overflow: 'auto',
    maxHeight: '750px',
    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
        width: '12px',
    },
    '&::-webkit-scrollbar-track': {
        boxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
        borderRadius: '10px',
        // 直接给主题色添加50%透明度
        backgroundColor: alpha(theme.palette.primary.main, 0.5),
    },
    '&::-webkit-scrollbar-thumb': {
        boxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
        borderRadius: '10px',
        backgroundColor: theme.palette.primary.main,
    },
}));

alpha函数会自动将传入的颜色值（支持hex、rgb、主题色变量等多种格式）转换为对应透明度的rgba色值，切换主题时会自动跟随theme.palette.primary.main的取值变化，不需要额外做适配。

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