Comprehensive Guide to Styling Scrollbars with CSS-in-JS in Material UI

In modern web development with React and Material UI, styling scrollbars using CSS-in-JS can be challenging, especially when aiming to avoid external stylesheets. This article explores effective methods to customize scrollbars within the Material UI ecosystem.

Global Styling with @global Selector

Based on the best practice from Material UI's CssBaseline, using the @global selector in JSS allows for applying scrollbar styles globally. Here's a code example:

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

This approach ensures that the styles are applied to all elements, similar to how CssBaseline normalizes styles.

Styling Specific Containers

For performance or specificity, you might want to style scrollbars only for certain containers. In Material UI, you can define styles for a specific class:

const useStyles = makeStyles(theme => ({
  list: {
    overflowY: 'auto',
    '&::-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'
    }
  }
}));

Then apply the class to the desired element.

Version Compatibility: Material UI v4 and v5

Material UI v4 uses the overrides key in the theme, while v5 uses components. Here's how to integrate scrollbar styles in the global theme:

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

For v5:

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

This ensures compatibility across versions.

Best Practices and Considerations

When styling scrollbars, consider browser support, as WebKit-based styles only work in certain browsers. Additionally, global styles might impact performance, so use them judiciously. For specific elements, the sx prop in v5 offers a concise way:

<Box sx={{
  overflow: 'auto',
  scrollbarWidth: 'thin',
  '&::-webkit-scrollbar': {
    width: '0.4em'
  },
  '&::-webkit-scrollbar-track': {
    background: '#f1f1f1'
  },
  '&::-webkit-scrollbar-thumb': {
    backgroundColor: '#888'
  }
}}>
  Content here
</Box>

In conclusion, by leveraging @global selectors or specific styling methods, developers can effectively customize scrollbars in Material UI applications, enhancing user experience while maintaining code organization.