如何通过 ::-webkit-scrollbar-thumb 使用 themify 配置

Question

::-webkit-scrollbar-thumb {

@include themify {

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

}

边框半径：10px；

}

以上代码片段无效

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

Answer 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();
}

如何通过 ::-webkit-scrollbar-thumb 使用 themify 配置

How to use themify configs with ::-webkit-scrollbar-thumb

sass

mixins

reactjs