MUI - 如何在 JS 中使用 CSS 设置滚动条的样式？

Question

我真的很讨厌我的滚动条样式必须有一个外部样式表，我想把它和我的根组件上的其他样式一起放在一起。这个我试过了...

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

然后将 class 添加到根组件 div。我正在使用 withStyles HOC 并且正在应用其他样式，所以我知道它正在工作，但我不知道如何获得滚动条样式。有什么办法吗？

<div className={classes.scrollBar} />

Answer 1

由于您想在全球范围内执行此操作，因此您可能需要遵循 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'
    }
  }
});

看起来要使用的 top-level/global 选择器是 @global。

Answer 2

对我来说，我只想全局更改滚动条设置，因此根据此处提供的示例： typography-html-font-size

您可以使用类似这样的方法来构建您的主题：

createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '*': {
          'scrollbar-width': 'thin',
        },
        '*::-webkit-scrollbar': {
          width: '4px',
          height: '4px',
        }
      }
    }
  }
})

然后将创建的对象传递给ThemeProvider即可。 ThemeProvider document

Answer 3

我建议只为特定容器应用滚动条样式，因为@Global 可能需要渲染时间才能应用于所有元素。这对我来说很好

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

Answer 4

最简单的方法是在您的 app.css 文件中使用以下代码并将其导入您的 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;
}

Answer 5

前 4 个答案中的

None 给出了一个简单的 copy/paste 解决方案，可立即用于 mui v4 或 v5 和 CssBaseline。这是我的

对于 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;

因此，如果您在应用顶部使用 CssBaseline，那么只需将覆盖对象放入您的全局主题中即可正常工作。

如果你得到了 mui 的 beta v5，那么请在你的全局主题中使用它：

// 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",
          },
        },
      },
    },
  },
});

Answer 6

此配置适用于现代 Chrome 和 Firefox 浏览器上的 Material UI v4。

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

Answer 7

你甚至不需要使用createTheme，只需在MUI v5中使用GlobalStyles，这样可重复使用：

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

或者，如果您想在深色主题中使用滚动条，MUI 为您提供了一个开箱即用的工具：

import darkScrollbar from '@mui/material/darkScrollbar';

<GlobalStyles styles={{ ...darkScrollbar() }} />

现场演示

Answer 8

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

Answer 9

更新 2022 年 3 月

在 MUI@5 中，实现滚动调整到 dark/light 主题的最简单方法是使用 CssBaseline 中的配色方案，它在 Chrome、Edge 中有效& FF

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

<CssBaseline enableColorScheme />

light/dark 薄型滚动条的 CSB Chrome、Edge、FF 和 Safari 模式：

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

更多详情：

如果你想要漂亮的薄卷轴你可以使用scroll-width: "thin"

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

但目前仅适用于 FF

来自 MUI 的

darkScrollbar 在 Edge 和 Chrome 中制作了漂亮的细暗滚动条，但在 FF

中却没有

darkScrollbar 也有 3 个可用选项，所以我们可以结合这两种方法并为浅色模式传递灰色：

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

Answer 10

在 MUI v5 中，您可以简单地使用特定元素：

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

MUI - 如何在 JS 中使用 CSS 设置滚动条的样式？

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

reactjs

material-ui

jss

现场演示