I am using Material-UI to expand my React project, but i can't change the scrollbars in the mui components. This was the css i was using before mui integration:
::-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;
}
After using mui I realized css is overwritten by mui's own styling while using mui components such as <Box/> or <Drawer/>. I'm also using <ThemeProvider/> from mui with following theme:
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: {},
});
After trying CSS Baseline overrides from mui documentation, i couldn't get any results but also couldn't confirm what was the problem due to my limited understanding of mui`s styling and the fact that CSS Baseline scrollbars was marked deprecated.
how can i integrate the above shown css scrollbar styles to a mui component or mui theme?
In my case I needed the parent class and the webkit, like this (calendar component 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'
},
}
}
}