如何在 Reactjs 滚动条模块中正确插入

Question

我采用简单的Facebook flux-chat 示例并为“MessagesSection”组件插入更好的滚动条

滚动条的插件是here

我安装了模块，在“MessagesSection”中需要它，并将新组件包装在消息列表中，如下所示：

render: function() {
    var postListItems = this.state.posts.map(getPostListItem);
    return (
      <div className="post-section">
        <h3 className="post-thread-heading">{this.state.thread.name}</h3>

        <ul className="post-list" ref="postList">
                <ScrollbarWrapper>
                  <div>             
                   {postListItems}
                  </div>
                </ScrollbarWrapper>
        </ul>

        <PostComposer threadID={this.state.thread.id}/>
      </div>
    );
  }

**注意：我也尝试将它包裹在无序列表周围。

但滚动条保持不变（仍然是以前的基本 chrome 滚动条）。

滚动条没有改变，我做错了什么？

Answer 1

将此 CSS 复制粘贴到 index.html 中：https://github.com/ojame/react-scrollbars/blob/master/examples/views/home/examples/custom-scrollbar.css

并像这样使用包装器上的类：<ScrollbarWrapper className="ScrollbarContent--custom">