material-ui how can I style the scrollbar with CSS in JS?
I would recommend to apply scrollbar styles only for the specific container, cause @Global may take rendering time to apply on the All elements. This works fine as for me
list: {
overflowY: "auto",
margin: 0,
padding: 0,
listStyle: "none",
height: "100%",
'&::-webkit-scrollbar': {
width: '0.4em'
},
'&::-webkit-scrollbar-track': {
boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)'
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'rgba(0,0,0,.1)',
outline: '1px solid slategrey'
}
}
Since you want to do this globally, you may want to follow what CssBaseline does in it source code: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CssBaseline/CssBaseline.js
const styles = theme => ({
'@global': {
'*::-webkit-scrollbar': {
width: '0.4em'
},
'*::-webkit-scrollbar-track': {
'-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)'
},
'*::-webkit-scrollbar-thumb': {
backgroundColor: 'rgba(0,0,0,.1)',
outline: '1px solid slategrey'
}
}
});
it looks like the top-level/global selector to use is @global
.
For me I just wanted to change the scrollbar settings globally, so based on the sample provided here: typography-html-font-size
You can use some approach like this for building your theme:
createMuiTheme({
overrides: {
MuiCssBaseline: {
'@global': {
'*': {
'scrollbar-width': 'thin',
},
'*::-webkit-scrollbar': {
width: '4px',
height: '4px',
}
}
}
}
})
Then just pass the created object to ThemeProvider
. ThemeProvider document