title: Can I customize Carousel-indicators in react-responsive-carousel
body: <p>I am using the <a href="http://react-responsive-carousel.js.org/" rel="nofollow noreferrer">react-responsive-carousel</a> library. Here, I want to change the default indicators CSS, dots shape to line shape.
  My code is,</p>
  <pre><code> &lt;CarouselWrapper
        sx={{ marginTop: &quot;124px&quot;, maxHeight: &quot;486px&quot;, minHeight: &quot;150px&quot; }}
      &gt;
        &lt;Carousel autoPlay infiniteLoop showArrows={false}&gt;
          &lt;div&gt;
            &lt;Image src={image1} /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;Image src={image1} /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;Image src={image1} /&gt;
          &lt;/div&gt;
        &lt;/Carousel&gt;
      &lt;/CarouselWrapper&gt;
  </code></pre>
  <p>the current shape of those indicators,</p>
  <p><a href="https://i.stack.imgur.com/39Ycg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/39Ycg.png" alt="enter image description here" /></a></p>
  <p>Is it possible to customize that dots shape indicators?</p>