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

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

 <div className={classes.scrollBar} />

原文由 Joff 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 。

原文由 user9903 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我建议只为特定容器应用滚动条样式，因为@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'
  }
}

原文由 Artem Luzhanovskyi 发布，翻译遵循 CC BY-SA 4.0 许可协议