如何在Material UI中自定义滚动条

Question

我正在使用Material UI来扩展我的React项目，但我无法更改mui组件中的滚动条。这是我在mui集成之前使用的css：

::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 5px;
margin: 5px;
}
::-webkit-scrollbar-thumb {
background-color: #1a1b1c;
border-radius: 5px;
border: solid 2px #282c34;
}
::-webkit-scrollbar-thumb:hover {
background-color: #1a1b1c;
border-radius: 5px;
border: solid 2px #1a1b1c;
}

在使用mui之后，我意识到在使用诸如<Box/>或<Drawer/>之类的mui组件时，css会被mui自己的样式覆盖。我也在使用来自mui的<ThemeProvider/>，主题如下：

export const dark_theme = createTheme({
breakpoints: {
values: {
mobile: 0,
desktop: 1024,
},
},
palette: {
type: "dark",
primary: {
main: "#3f51b5",
contrastText: "#fff",
},
secondary: {
main: "#8700ff",
contrastText: "#fff",
},
background: {
default: "#282c34",
},
},
typography: {
fontFamily: "Poppins",
allVariants: {
color: "white",
},
},
overrides: {},
});

在尝试了mui文档中的CSS基线覆盖后，我无法得到任何结果，但也无法确认问题出在哪里，因为我对mui的样式理解有限，而且CSS基线滚动条被标记为不推荐使用。

如何将上面显示的css滚动条样式集成到mui组件或mui主题中？

Answer 1

在我的情况下，我需要父类和webkit，就像这样(日历组件MUI(

MuiCalendarPicker: {
styleOverrides: {
root: {
'.css-1wvgxus-MuiCalendarPicker-viewTransitionContainer::-webkit-scrollbar': {
width: '8px',
marginRight: '5px'
},
'.css-1wvgxus-MuiCalendarPicker-viewTransitionContainer::-webkit-scrollbar-track': {
background: '#E4E7EB', 
borderRadius: '100px'
},
'.css-1wvgxus-MuiCalendarPicker-viewTransitionContainer::-webkit-scrollbar-thumb': {
background: '#6B7786',
borderRadius: '100px'
},
}
}
}