如何更改react-custom-scrollbars的光标样式？ [英] How to change cursor style for react-custom-scrollbars?

问题描述

react-custom-scrollbars 的默认光标为指针（在滚动条上移动鼠标）。

The default cursor for react-custom-scrollbars is pointer when you move your mouse on the scroll bar.

是否可以更改光标样式？

Is there a way to change cursor style?

现在这些方法都不起作用。

Right now neither of these works.

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

和

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

.my-style {
  cursor: default;
}

推荐答案

根据文档（< a href = https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/customization.md rel = nofollow noreferrer> 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，以使基础正常工作。并根据需要进行调整。

Then apply the bellow css, to get the base working. And tweak as you like.

（在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) 
                    }

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

This is the style that is applied by default when we don't manually render the elements. The passed props will handle updating the dimension of the thumb.

我不知道这是否是故意的。因此，我们可以自定义所需的方式，而不必在CSS中使用！important（看起来就是这样！）。

I don't know if that was intentional. So we can customize the way we want, and that we will not have to use !important in our css (it seem like that!).

对于。查看元素。样式已通过，如果您要覆盖（因为我需要自己（保证金：-17px，而不是-15px）），则只需使用CSS规则即可。使用！important。或使用内联CSS。

For .view element. the style are passed, if you want to override (as i needed myself (margin: -17px, instead of -15px)) then just css rules. use !important. Or use inline 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;
}

这篇关于如何更改react-custom-scrollbars的光标样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！