html - 如何更改 react-custom-scrollbars 的光标样式？

Question

react-custom-scrollbars 的默认光标当您在滚动条上移动鼠标时是指针。

有没有办法改变光标样式？

目前这些都不起作用。

<Scrollbars style={{ cursor: 'default' }}>
  <p>Some content</p>
</Scrollbars>

和

<Scrollbars className="my-style">
  <p>Some content</p>
</Scrollbars>

.my-style {
  cursor: default;
}

Answer 1

根据文档 ( https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/customization.md )

<Scrollbars
        renderTrackHorizontal={props => <div {...props} className="track-horizontal"/>}
        renderTrackVertical={props => <div {...props} className="track-vertical"/>}
        renderThumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}
        renderThumbVertical={props => <div {...props} className="thumb-vertical"/>}
        renderView={props => <div {...props} className="view"/>}>
        <div>
            content here
        </div>
</Scrollbars>

然后应用下面的 css，让基础工作。并根据需要进行调整。

(在 SCSS 中)

.track-vertical {
                        top: 2px;
                        bottom: 2px;
                        right: 2px;
                        border-radius: 3px;
                        background: rgba(255, 255, 255, 0.111);

                        .thumb-vertical {
                            position: relative;
                            display: block;
                            width: 100%;
                            cursor: pointer;
                            border-radius: inherit;
                            background-color: rgba(123, 154, 255, 0.418); // changed the color
                        }

                    }

                    .track-horizontal {
                        position: absolute;
                        height: 6px;
                        right: 2px;
                        bottom: 2px;
                        left: 2px;
                        border-radius: 3px;

                        .thumb-horizontal {
                            position: relative;
                            display: block;
                            height: 100%;
                            cursor: pointer;
                            border-radius: inherit;
                            background-color: rgba(125, 149, 255, 0.993); // changed the color
                        }
                    }

                    .view {
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        right: 0px;
                        bottom: 0px;
                        overflow: scroll;
                        margin-right: -15px;
                        margin-bottom: -17px !important; // changed from -15px  (default) to -17px (native scrollbar had a portion visible) 
                    }

这是当我们不手动渲染元素时默认应用的样式。传递的 Prop 将处理更新拇指的尺寸。

不知道是不是故意的。所以我们可以自定义我们想要的方式，我们将不必在我们的 css 中使用 !important(看起来像那样!)。

对于 .view 元素。样式已通过，如果您想覆盖(因为我自己需要(边距:-17px，而不是-15px))，那么只需 css 规则。使用!重要。或者使用内联 css。

以上是SCSS。下面是编译后的 css:

(在 CSS 中)

.track-vertical {
  top: 2px;
  bottom: 2px;
  right: 2px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.111);
}
.track-vertical .thumb-vertical {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: inherit;
  background-color: rgba(123, 154, 255, 0.418);
}

.track-horizontal {
  position: absolute;
  height: 6px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  border-radius: 3px;
}
.track-horizontal .thumb-horizontal {
  position: relative;
  display: block;
  height: 100%;
  cursor: pointer;
  border-radius: inherit;
  background-color: rgba(125, 149, 255, 0.993);
}

.view {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: scroll;
  margin-right: -15px;
  margin-bottom: -17px !important;
}