Can I customize Carousel-indicators in react-responsive-carousel

Question

I am using the react-responsive-carousel library. Here, I want to change the default indicators CSS, dots shape to line shape. My code is,

 <CarouselWrapper
      sx={{ marginTop: "124px", maxHeight: "486px", minHeight: "150px" }}
    >
      <Carousel autoPlay infiniteLoop showArrows={false}>
        <div>
          <Image src={image1} />
        </div>
        <div>
          <Image src={image1} />
        </div>
        <div>
          <Image src={image1} />
        </div>
      </Carousel>
    </CarouselWrapper>

the current shape of those indicators,

Is it possible to customize that dots shape indicators?

Answer 1

A solution if using SCSS and needing less customisation. Using a wrapping selector you can use:

  .yourSelector {
    :global(.carousel .control-dots .dot) {
            background-color: blue;
          }
        }