title: How to add slick-active class in Slider dots in React Slick
body: <p>I used react-slick and made a carousel using Slider component. The code is bellow,</p>
  
  <pre><code>const carousel = (props) =&gt; {
      return (
          &lt;div style={{ height: '50%', marginTop: '20px' }}&gt;
              &lt;Slider {...settings}&gt;
                  &lt;div className={text__bar}&gt;
                      &lt;div &gt;
                          &lt;font&gt;Lorum Ipsum 1&lt;/font&gt;
                      &lt;/div&gt;
                      &lt;div className={slide1} /&gt;
                  &lt;/div&gt;
                  &lt;div className={text__bar}&gt;
                      &lt;div&gt;
                          &lt;font&gt;Lorum Ipsum 2&lt;/font&gt;
                      &lt;/div&gt;
                      &lt;div className={slide1} /&gt;
                  &lt;/div&gt;
                  &lt;div className={text__bar}&gt;
                      &lt;div&gt;
                          &lt;font&gt;Lorum Ipsum 3&lt;/font&gt;
                      &lt;/div&gt;
                      &lt;div className={slide1} /&gt;
                  &lt;/div&gt;
              &lt;/Slider&gt;
              &lt;div className={purple__bar}&gt;&lt;/div&gt;
          &lt;/div&gt;
      );
  };
  </code></pre>
  
  <p>And the settings object,</p>
  
  <pre><code>const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 5000,
      className: SlickMain,
      dotsClass: button__bar,
      arrows: false,
  };
  </code></pre>
  
  <p>I have added some extra CSS to style my carousel dots (buttons) to look like bellow,</p>
  
  <p><a href="https://i.stack.imgur.com/Hr9Vp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hr9Vp.jpg" alt="dotbar"></a></p>
  
  <p>When examined by the developer tools the button related to the currently shown slide gets a CSS class injected named 'slick-active'</p>
  
  <p><a href="https://i.stack.imgur.com/MZRhy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MZRhy.jpg" alt="injected-class"></a></p>
  
  <p>What I need to do is change the background color of the button corresponding to the slide, to black relapsing the current color purple.</p>
  
  <p>What I did was,</p>
  
  <pre><code>.button__bar li.slick-active button {
      opacity: .75;
      color: #000
  }
  </code></pre>
  
  <p>But it won't work. What am I missing?</p>
  
  <p><strong>.button__bar</strong> is the dotsClass I have given to dots in settings object.</p>