How to change cursor style for react-custom-scrollbars?

Question

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?

Rig

Answer 1

As per the doc (https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/customization.md)

 
}
        renderTrackVertical={props => 
}
        renderThumbHorizontal={props => 
}
        renderThumbVertical={props => 
}
        renderView={props => 
}>
        

            content here
        

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

(in 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.

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!).

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.

The above is SCSS. Here bellow the compiled css:

(in 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;
}