title: How to correctly plugin in a Reactjs Scroll bar module
body: <p>I'm taking the simple <a href="https://github.com/facebook/flux/tree/master/examples/flux-chat" rel="nofollow">Facebook flux-chat</a> example and plugging in nicer scroll bars for the "<a href="https://github.com/facebook/flux/blob/master/examples/flux-chat/js/components/MessageSection.react.js" rel="nofollow">MessagesSection</a>" component</p>
  
  <p>The plugin in for the scrollbars is <a href="https://www.npmjs.com/package/react-scrollbars" rel="nofollow">here</a></p>
  
  <p>I installed the module, required it in the "MessagesSection" and wrapped the new component around the list of messages like so:</p>
  
  <pre><code>render: function() {
      var postListItems = this.state.posts.map(getPostListItem);
      return (
        &lt;div className="post-section"&gt;
          &lt;h3 className="post-thread-heading"&gt;{this.state.thread.name}&lt;/h3&gt;
  
          &lt;ul className="post-list" ref="postList"&gt;
                  &lt;ScrollbarWrapper&gt;
                    &lt;div&gt;             
                     {postListItems}
                    &lt;/div&gt;
                  &lt;/ScrollbarWrapper&gt;
          &lt;/ul&gt;
  
          &lt;PostComposer threadID={this.state.thread.id}/&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>**Note: I also tried wrapping it around the unordered list as well.</p>
  
  <p>Yet the scroll bars remain unchanged(still the basic chrome ones that were there before).</p>
  
  <p>What am I doing wrong that the scroll bars are not changing?</p>