react-custom-scrollbars can't get styling to work

Question

I'm relative new to react but I'm trying to use a common custom scrollbar but I can't seem to get the styling to work, I also submitted this as an issue on github but maybe somebody here has the answer.

Using react-custom-scrollbars v4.0.0; React v15.1.0; Redux v3.5.2

So I've been trying to add my own styling to the thumb and track but I can't seem to get it to work. I figured out that you need to add the complete styling (I did see this is fixed in 4.0.1) but when I try to set a different color to the thumb it doesn't style the actual thumb but just places a 'new' static thumb in that color and the actual thumb that is moving isn't colored, what am I doing wrong?

<Scrollbars
   autoHide={false}
   autoHeight={true}
   autoHeightMin={500}
   autoHeightMax={600}
   renderThumbVertical={props => < div {...props} className="thumb-vertical"/>}
   renderTrackVertical={props => < div {...props} className="track-vertical"/>}>
        // content
</Scrollbars >

.thumb-vertical {
   position: relative;
   display: block;
   width: 100px;
   height: 100px;
   cursor: pointer;
   border-radius: inherit;
   background-color: #d9534f;
}

.track-vertical {
   position: absolute;
   width: 6px;
   display: block!important;
   right: 2px;
   bottom: 2px;
   top: 2px;
   border-radius: 3px;
}

Answer 1

For the one that are struggling to figure out how to make the customization work. Know as it's mentioned in this question, you need to provide the base styling.

You can find how here https://stackoverflow.com/a/54973078/7668448

Or here https://github.com/malte-wessel/react-custom-scrollbars/issues/208

Hope this is helpful.