Web開発ブログ

Material UIでスクロールバーのデザインを変更する

Material UI

React

作成

2023/07/13

使用したバージョン
@mui/material 5.13.6

createThemeでMuiCssBaselineをオーバーライドする。
ページ全体に表示されるスクロールバーはやや太めにして、個別のコンポーネントのスクロールバーは細めにしてある。


import { grey } from "@mui/material/colors";
const theme = createTheme({
    components: {
        MuiCssBaseline: {
            styleOverrides: {
                'body::-webkit-scrollbar': {
                    width: '10px',
                    height: '10px'
                },
                '::-webkit-scrollbar': {
                    width: '8px',
                    height: '8px'
                },
                '::-webkit-scrollbar-track': {
                    background: grey[500],
                },
                '::-webkit-scrollbar-thumb': {
                    background: grey[700],
                    borderRadius: '5px'
                }
            },
        },
    },
});

このthemeとCssBaselineで全体を囲むことで適用される。


<ThemeProvider theme={theme}>
    <CssBaseline />
    {children}
</ThemeProvider>

結果、当サイトのようなスクロールバーとなる。