material-ui how can I style the scrollbar with CSS in JS?

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.

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'  }}

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