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?

Right now neither of these works.

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

and

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

.my-style {
  cursor: default;
}

Answer 1

As per the doc (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>

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

Answer 2

Hi simply use CSS to do it, and load an image base64 or file.jpg png gif ... etc.

Doesn't work at all after tested :

.cursor1 {
  cursor: url(data:image/png;base64,iVBORw0KGgoAASUhEUgAAACAAAAAgCAYAAABzenr0AAAJFklEQVR42rWXCXBU9R3Hv+/V...), auto;
}

If you want the standard cursors still running tested:

.cursors {
  text-align:center;
}
.cursors-main {
  display:inline-block;
  font-size:12px;
  font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background:green;
  color:#FFF;
  padding:10px 25px;
  margin-bottom:5px;
}
.cursors-main:hover {
  background:#555;
}
.auto            { cursor: auto; }
.deafult         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.development.js"></script>
<section class="cursors">
    <article class="cursors-main auto">auto</article>
    <article class="cursors-main default">default</article>
    <article class="cursors-main none">none</article>
    <article class="cursors-main context-menu">context-menu</article>
    <article class="cursors-main help">help</article>
    <article class="cursors-main pointer">pointer</article>
    <article class="cursors-main progress">progress</article>
    <article class="cursors-main wait">wait</article>
    <article class="cursors-main cell">cell</article>
    <article class="cursors-main crosshair">crosshair</article>
    <article class="cursors-main text">text</article>
    <article class="cursors-main vertical-text">vertical-text</article>
    <article class="cursors-main alias">alias</article>
    <article class="cursors-main copy">copy</article>
    <article class="cursors-main move">move</article>
    <article class="cursors-main no-drop">no-drop</article>
    <article class="cursors-main not-allowed">not-allowed</article>
    <article class="cursors-main all-scroll">all-scroll</article>
    <article class="cursors-main col-resize">col-resize</article>
    <article class="cursors-main row-resize">row-resize</article>
    <article class="cursors-main n-resize">n-resize</article>
    <article class="cursors-main s-resize">s-resize</article>
    <article class="cursors-main e-resize">e-resize</article>
    <article class="cursors-main w-resize">w-resize</article>
    <article class="cursors-main ns-resize">ns-resize</article>
    <article class="cursors-main ew-resize">ew-resize</article>
    <article class="cursors-main ne-resize">ne-resize</article>
    <article class="cursors-main nw-resize">nw-resize</article>
    <article class="cursors-main se-resize">se-resize</article>
    <article class="cursors-main sw-resize">sw-resize</article>
    <article class="cursors-main nesw-resize">nesw-resize</article>
    <article class="cursors-main nwse-resize">nwse-resize</div>
</section>

Answer 3

Weird! how about using some parent like .cursor-normaliizer or something. like this:

<Scrollbars className="cursor-normalizer">
     <p>Some content</p>
</Scrollbars>

css:

.cursor-normalizer div:last-child > div{ // exact selector
      cursor: default !important
}

DEMO