如何使用样式化组件更改 antd 轮播点的形状和颜色

Question

尝试改变antd轮播点样式，CSS可以实现，styled-components不行（我的项目不允许CSS）。作为前端的新手，我不知道正确的解决方案。

这里是代码示例https://stackblitz.com/edit/react-opnojd-rfagtz?file=index.js

提前谢谢:)

Answer 1

当使用 styled-component 时，样式将与 className sc-... 一起应用。

在您的情况下，其样式将应用于包含.slick-slider 的div。

但是，.ant-carousel 是其父级的 className。

因此，如果它包含在选择器中，则不会应用样式。

试试这个。

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;
  }
`;