how to change the antd carousel dot shape and color with styled component

user_14681528 0
Viewed 3910

tried to change the antd carousel dots styles, it can be able to implement with CSS but not with styled-components(CSS is not allowed in my project). as im new to front-end dont know the proper solution for this.

here is the code example https://stackblitz.com/edit/react-opnojd-rfagtz?file=index.js

thanks in advance :)antd carousel

antd styled-components reactjs
1 Answers

When using styled-component, the style would be applied with className sc-....

In your case, its style would be applied in div containing .slick-slider.

But, .ant-carousel is className for parent of that.

So, if it was included in the selector, style will be not applied.

Try this.

const CarouselWrapper = styled(Carousel)`
  > .slick-dots li button {
    width: 6px;
    height: 6px;
    border-radius: 100%;
  }
  > .slick-dots li.slick-active button {
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: red;
  }
`;
user_146729110
Related