reactjs - Material UI - 如何在 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'
      }
    }
  });

然后将类添加到根组件 div 中。我正在使用 withStyles HOC 和正在应用的其他样式，所以我知道它正在工作，但我不知道如何获取滚动条样式。有什么办法可以做到这一点吗？

<div className={classes.scrollBar} />

Answer 1

由于您想在全局范围内执行此操作，因此您可能需要遵循CssBaseline其源代码为: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'
    }
  }
});

看起来要使用的顶级/全局选择器是@global。