react-custom-scrollbars无法使样式工作

时间:2016-11-01 13:02:39

标签: css reactjs

我相对较新,但我正在尝试使用常见的custom scrollbar,但我似乎无法使样式工作,我也提交了issue on github但也许有人在这里有答案。

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

所以我一直在尝试将自己的造型添加到拇指和轨道,但我似乎无法让它工作。我发现你需要添加完整的样式(我确实看到这在4.0.1中得到修复)但是当我尝试为拇指设置不同的颜色时它不会对实际的拇指进行样式,而只是放置一个'新'那种颜色的静态拇指和正在移动的实际拇指没有着色,我做错了什么?

before scroll after scroll

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

1 个答案:

答案 0 :(得分:0)

对于那些努力弄清楚如何使自定义工作的人来说。知道这个问题中提到的那样,您需要提供基本样式。

您可以在这里https://stackoverflow.com/a/54973078/7668448

或者在这里https://github.com/malte-wessel/react-custom-scrollbars/issues/208

希望这会有所帮助。