如何通过 ::-webkit-scrollbar-thumb 使用主题化配置答案

【问题标题】：How to use themify configs with ::-webkit-scrollbar-thumb如何通过 ::-webkit-scrollbar-thumb 使用主题化配置
【发布时间】：2021-12-07 23:21:45
【问题描述】：

::-webkit-scrollbar-thumb {

@include 主题化 {

background-color: $ant-scroll-color !important;

}

边框半径：10px；

}

上面的代码 sn-p 不起作用

要求是为 Web 组件集成深色和浅色主题。我只想根据明暗主题更改 chrome 中的滚动条颜色。上面的 @include themify 方法用于配置颜色。但此方法不适用于 ::-webkit-scrollbar-thumb

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： reactjs sass mixins

【解决方案1】：

Answer: 

 1. add this code in to mixins.scss . basically you are creating cutoms
    mixin for scroll bar colors

@mixin scrollbars() {
  // For Google Chrome
  @include themify {
    &::-webkit-scrollbar-thumb {
      background: $ant-scroll-color;
    }
  }
  @include themify {
    &::-webkit-scrollbar-thumb:hover {
      background: $ant-scroll-color;
    }
  }
  @include themify {
    &::-webkit-scrollbar-track {
      background: $white-color;
    }
  }
  // For Internet Explorer
  & {
    scrollbar-face-color: $ant-scroll-color;
    scrollbar-track-color: $ant-scroll-color;
  }
}

 2. add a ref to div which that use scroll in styles.scss
.customDiv{
overflow:auto:
@include scrollBars();
}

【讨论】：