score:42

Accepted answer

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.

score:0

this configuration works well for material ui v4 on modern chrome and firefox browsers.

const theme = createtheme({
  overrides: {
    muicssbaseline: {
      '@global': {
        '*': {
          scrollbarwidth: 'thin',
          scrollbarcolor: '#b7b7b7 transparent',
          '&::-webkit-scrollbar': {
            width: 6,
            height: 6,
            backgroundcolor: 'transparent',
          },
          '&::-webkit-scrollbar-track': {
            backgroundcolor: 'transparent',
          },
          '&::-webkit-scrollbar-thumb': {
            borderradius: 6,
            backgroundcolor: '#b7b7b7',
            minheight: 24,
            minwidth: 24,
          },
          '&::-webkit-scrollbar-thumb:focus': {
            backgroundcolor: '#adadad',
          },
          '&::-webkit-scrollbar-thumb:active': {
            backgroundcolor: '#adadad',
          },
          '&::-webkit-scrollbar-thumb:hover': {
            backgroundcolor: '#adadad',
          },
          '&::-webkit-scrollbar-corner': {
            backgroundcolor: 'transparent',
          },
        },
      },
    },
  },
});

score:0

in mui v5 for the specific element you can simply use:

<box sx={{
  overflow:"auto",
  scrollbarwidth: 'thin',
  '&::-webkit-scrollbar': {
    width: '0.4em',
  },
  '&::-webkit-scrollbar-track': {
    background: "#f1f1f1",
  },
  '&::-webkit-scrollbar-thumb': {
    backgroundcolor: '#888',
  },
  '&::-webkit-scrollbar-thumb:hover': {
    background: '#555'
  }
  }}>
</box>

score:1

you don't even need to use createtheme, just use globalstyles in mui v5, this is more reusable:

<globalstyles
  styles={{
    '*::-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',
    },
  }}
/>

or if you want to use a scrollbar in dark theme, mui has one for you out-of-the-box:

import darkscrollbar from '@mui/material/darkscrollbar';
<globalstyles styles={{ ...darkscrollbar() }} />

live demo

codesandbox demo

score:1

update march 2022

in mui@5 the easiest way the achieve scroll adjusted to dark/light theme is to use color scheme in cssbaseline which works in chrome, edge & ff

https://mui.com/components/css-baseline/#color-scheme

<cssbaseline enablecolorscheme />

csb for thin scroller for light/dark mode for chrome, edge, ff & safari:

https://codesandbox.io/s/material-ui-toggle-dark-light-mode-scrollbar-t542f7?file=/demo.tsx

more details:

if you want nice thin scroll you can use scroll-width: "thin"

https://caniuse.com/mdn-css_properties_scrollbar-width

but for now in works only in ff

darkscrollbar from mui makes nice thin dark scrollbar in edge & chrome, but not in ff

darkscrollbar has also 3 available options, so we can combine those two methods and pass grey colors for light mode:

import { grey } from "@mui/material/colors";
import { darkscrollbar } from "@mui/material";
...

muicssbaseline: {
    styleoverrides: {
      html: {
        ...darkscrollbar(
          mode === "light"
            ? {
                track: grey[200],
                thumb: grey[400],
                active: grey[400],
              }
            : undefined
        ),
        //scrollbarwidth for firefox
        scrollbarwidth: "thin",
      },
    },
},

score:2

    const usestyles = makestyles((theme) => ({
     
    
        detailedcard: {
            height: theme.spacing(60),
            display: 'flex',
            flexdirection: 'column',
            overflow: 'scroll',
            '&::-webkit-scrollbar': {
             width:0.5px
            },
           '&::-webkit-scrollbar-thumb': {
               width:0.5px
            },
        },
    }))

score:4

the simplest one is to use the following code in your app.css file and import it to your app.js :

::-webkit-scrollbar {
  width: 5px;
}

/* track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

score:11

none of the previous 4 answers gives a simple copy/paste solution that works right away for mui v4 or v5 and cssbaseline. so heres mine

for v4:

import { createtheme } from "@material-ui/core/styles";

const theme = createtheme({
  overrides: {
    muicssbaseline: {
      "@global": {
        body: {
          scrollbarcolor: "#6b6b6b #2b2b2b",
          "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
            backgroundcolor: "#2b2b2b",
          },
          "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
            borderradius: 8,
            backgroundcolor: "#6b6b6b",
            minheight: 24,
            border: "3px solid #2b2b2b",
          },
          "&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus": {
            backgroundcolor: "#959595",
          },
          "&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active": {
            backgroundcolor: "#959595",
          },
          "&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": {
            backgroundcolor: "#959595",
          },
          "&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
            backgroundcolor: "#2b2b2b",
          },
        },
      },
    },
  },
});

export default theme;

so, if you are using cssbaseline at the top of your app, then just put the overrides object into your global theme and it will work fine.

if you got your hands on the beta v5 of mui, then use this in your global theme:

// optional for better type support
import type {} from "@mui/lab/themeaugmentation";

import { createtheme } from "@mui/material/styles";

const theme = createtheme({
  components: {
    muicssbaseline: {
      styleoverrides: {
        body: {
          scrollbarcolor: "#6b6b6b #2b2b2b",
          "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
            backgroundcolor: "#2b2b2b",
          },
          "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
            borderradius: 8,
            backgroundcolor: "#6b6b6b",
            minheight: 24,
            border: "3px solid #2b2b2b",
          },
          "&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus": {
            backgroundcolor: "#959595",
          },
          "&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active": {
            backgroundcolor: "#959595",
          },
          "&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": {
            backgroundcolor: "#959595",
          },
          "&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
            backgroundcolor: "#2b2b2b",
          },
        },
      },
    },
  },
});

score:15

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

score:31

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

Related Query

More Query from same tag