Material UI - How can I style the scrollbar with CSS in JS?

Question

I really hate having to have an external stylesheet for my scrollbar stylings and I want to put it in with the rest of my styles on my root component. I have tried this...

const styles = (theme: Theme) =>
  createStyles({
    scrollBar: {
      '&::-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'
      }
    }
  });

and then adding the class to root component div. I am using the withStyles HOC and the other styles there are being applied, so I know it is working, but I cannot figure out how to get at the scroll bar styles. Is there any way to do this?

<div className={classes.scrollBar} />

Is the question about the css? Or the technique to do something programmatically? — theMayer, Dec 14 '18 at 02:01
the question is about how to do it in JSS. I know the css works — Joff, Dec 14 '18 at 02:18
It's just not at all clear to me what you're trying to achieve. Normally CSS classes are defined during development and applied/removed programmatically. What is it you are trying to do? — theMayer, Dec 14 '18 at 15:30
Im trying to apply these styles through JSS because the rest of my styles are JSS. I don't want to have css fragmented in different places throughout my code base. I can apply these styles with an imported stylesheet but I cannot figure out how to achieve them through JSS — Joff, Dec 14 '18 at 17:25
Ahh, so your issue is more with the JSS than anything. I use SASS, so I can't help there. :( — theMayer, Dec 14 '18 at 18:11

score 52 · Accepted Answer · 2018-12-15T04:40:00.050

52

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.

edited Dec 15 '18 at 04:40

answered Dec 14 '18 at 22:45

2

I actually just discovered this too and was coming back here to write my own answer. Although I had to change the `&` to `*` in order for it to work. Can you please change your answer to use `*` and I will accept it. Thanks! – Joff Dec 15 '18 at 03:20
yeah that makes sense, the & was from the CssBaseline.js (which also makes sense in their case) – Dec 15 '18 at 04:40
how can i hide the scroll only for a single component? I tried changing ```global``` with my selector name & putting the code directly inside the selector. But failed with both. – Mohammed Amir Ansari Sep 18 '19 at 11:14
Remove `outline: 1px solid slategrey` for better look, and also for safari. – glinda93 Dec 31 '20 at 11:35
sir i am looking for the exact same problem but in am confused how can to integrate scrollbar class with the rest of the code can you pls explain this – Ali Raza Apr 01 '21 at 09:13
what does & and * mean? – Vipin Verma Feb 23 '22 at 20:43
1

the link of github has 404, also putting this code to my theme.js didnt fix my problem. im using material 4 and nextjs – Evaa Dec 05 '22 at 16:51

score 39 · Answer 2 · answered Nov 27 '19 at 08:51

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

Everything is right here, except for the space between `&` and `::`. — Devorein, Jun 07 '21 at 05:34

score 25 · Answer 3 · edited May 18 '23 at 23:58

None of the previous 4 answers gives a simple copy/paste solution that works right away for Material UI 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",
          },
        },
      },
    },
  },
});

Just copy and pasted for v5, worked perfectly with 0 issues. — Alexander McComb, Jan 14 '22 at 20:33
'&::-webkit-scrollbar' is working for me but thumb and track are not working, why is it so? :( — Vipin Verma, Feb 23 '22 at 20:49
great, you saved my time. , your solution is 100% working without any change — Abasaheb Gaware, Aug 24 '22 at 12:19
For some reason, It works fine on FireFox but for Chrome It works only If the devTools are opened on the mobile simulation — Zine eddine Boumaza, Aug 29 '23 at 10:32

score 16 · Answer 4 · edited Mar 04 '20 at 16:56

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 9 · Answer 5 · edited May 18 '23 at 23:58

9

In Material UI 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>

edited May 18 '23 at 23:58

Olivier Tassinari

8,238
4
23
23

answered Apr 16 '22 at 12:15

Abdul Rehman

139
1
5

I have tried this way because I need a custom scrollbar on a specific element, but this approach didn't work. Any advice? – Lele Mabur Jul 03 '23 at 09:21
@LeleMabur Which MUI version are you using? – Abdul Rehman Jul 04 '23 at 11:06
It's latest mui, v5.13.6. I have created a question here https://stackoverflow.com/q/76609329/12291670 – Lele Mabur Jul 04 '23 at 17:38

score 5 · Answer 6 · answered Nov 05 '21 at 05:23

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

This is the easiest solution and the best one yet for my use case, Thanks. — Yash Agarwal, May 22 '23 at 11:30

score 4 · Answer 7 · answered Jan 24 '21 at 07:14

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

keemor · Answer 8 · 2022-03-02T13:06:19.187

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",
      },
    },
},

atazmin · Answer 9 · 2022-08-01T21:25:16.520

This worked for me in MUI v5

global theme override

...

MuiCssBaseline: {
      styleOverrides: {
        html: {
          '& ::-webkit-scrollbar': {
                            width: '20px',
          },
          '& ::-webkit-scrollbar-track': {
           
          },
          '& ::-webkit-scrollbar-thumb': {
            
          },
          '& ::-webkit-scrollbar-thumb:hover': {
            
          },
        },
      },
    },

...

global specific component override

...

MuiCard: {
      styleOverrides: {
        root: {
          '::-webkit-scrollbar': {
                width: '20px',            
          },
          '::-webkit-scrollbar-button': {
           
          },
          '::-webkit-scrollbar-thumb': {
           
          },
          '::-webkit-scrollbar-thumb:hover': {
          
          },
          '::-webkit-scrollbar-track': {
         
          },
          '::-webkit-scrollbar-track-piece': {
   
          },
          '::-webkit-scrollbar-corner': {
 
          },
          '::-webkit-resizer': {

          },
        },
      },
    },

...

in sx props

...

          <Box
            component="div"
            sx={{
              overflowY: 'scroll',
              height: { xs: '300px' },              
              '::-webkit-scrollbar': {
                width: '20px',
              },
              '::-webkit-scrollbar-button': {
      
              },
              '::-webkit-scrollbar-thumb': {
        
              },
              '::-webkit-scrollbar-thumb:hover': {
                
              },
              '::-webkit-scrollbar-track': {
             
              },
              '::-webkit-scrollbar-track-piece': {
               
              },
              '::-webkit-scrollbar-corner': {
              
              },
              '::-webkit-resizer': {
                
              },
            }}
          >

...

Shahnad S · Answer 10 · 2022-02-25T17:44:58.650

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
            },
        },
    }))

edited Feb 25 '22 at 17:44

answered Dec 05 '21 at 11:00

Shahnad S

983
10
17

'&::-webkit-scrollbar' is working for me but thumb and track are not working – Vipin Verma Feb 23 '22 at 20:44
use '&::-webkit-scrollbar-thumb' under webkit scrollbar – Shahnad S Feb 24 '22 at 13:39
you mean below it or inside? what if I am not using webkit scrollbar and only need to change the thumb and track color? – Vipin Verma Feb 24 '22 at 17:28
i added in the above code – Shahnad S Feb 25 '22 at 17:42
it works after your suggestion but then the default arrows that come with scrollbar are gone. and it looks horrible without it. tried other solutions for arrows, but they are too much work for a too little thing – Vipin Verma Feb 27 '22 at 23:09

score 1 · Answer 11 · answered Oct 18 '22 at 18:02

joining @Artem Luzhanovskyi, you can show the scroll bar after the hover on parent element that is to keep the design of your element more clean

sx={
    {
        ...
        '&:hover::-webkit-scrollbar': {
        display: 'block',
        },
        '&::-webkit-scrollbar': {
        display: 'none',
        width: '0.512rem',
        },
        '&::-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: '#8d8e90',
        height: '8px',
        borderRadius: '8px',
        },
        ...
    }
}

score 0 · Answer 12 · answered Oct 20 '21 at 10:46

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 · Answer 13 · answered Nov 27 '22 at 16:19

import React, { useEffect, useRef, useState } from "react";
import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import ListItemText from "@mui/material/ListItemText";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import Checkbox from "@mui/material/Checkbox";
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
square: true,
elevation: 1,
sx: {
  "&::-webkit-scrollbar": {
    width: 2,
  },
  "&::-webkit-scrollbar-track": {
    boxShadow: `inset 0 0 1px rgba(0, 0, 0, 0.3)`,
  },
  "&::-webkit-scrollbar-thumb": {
    backgroundColor: "darkgrey",
    outline: `1px solid slategrey`,
  },
},
style: {
  maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
  width: 250,
 },
 },
};
const names = [
 "Oliver Hansen",
 "Van Henry",
 "April Tucker",
 "Ralph Hubbard",
 "Omar Alexander",
 "Carlos Abbott",
 "Miriam Wagner",
 "Bradley Wilkerson",
 "Virginia Andrews",
 "Kelly Snyder",
];

const Component= () => {
const [personName, setPersonName] = useState([]);

const handleChange = (event) => {
 const {
  target: { value },
} = event;
setPersonName(
  // On autofill we get a stringified value.
  typeof value === "string" ? value.split(",") : value
);
};
return (
<div
  className="max-h-screen "

>
 
  <div>
    <FormControl sx={{ width: 280 }}>
      <Select
        labelId="demo-multiple-checkbox-labeaaal"
        id="demo-multiple-checkbox66"
        multiple
        value={personName}
        onChange={handleChange}
        placeholder="select style"
        input={<OutlinedInput size="small" sx={{ borderRadius: "8px" }} />}
        renderValue={(selected) => {
          if (selected.length === 0) {
            return <em>Placeholder</em>;
          }

          return selected.join(", ");
        }}
        displayEmpty
        MenuProps={MenuProps}
        // inputProps={{ "aria-label": "Without label" }}
        sx={{
          "&::-webkit-scrollbar": {
            width: 1,
          },
          "&::-webkit-scrollbar-track": {
            boxShadow: `inset 0 0 1px rgba(0, 0, 0, 0.3)`,
          },
          "&::-webkit-scrollbar-thumb": {
            backgroundColor: "darkgrey",
            outline: `1px solid slategrey`,
          },
        }}
      >
        {names.map((name) => (
          <MenuItem
            key={name}
            value={name}
            sx={{
              padding: "0px",
              fontFamily: "Inter",
              fontStyle: "normal",
              fontWeight: "400",
              fontSize: "14px",
              lineHeight: "20px",
            }}
          >
            <Checkbox
              size="small"
              checked={personName.indexOf(name) > -1}
            />
            <ListItemText primary={name} />
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  </div>
</div>
 );
};

export default Component;

Material UI - How can I style the scrollbar with CSS in JS?

13 Answers13

Live Demo

Linked