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

Question

尝试更改antd轮播点样式，它可以用CSS实现，但不能用样式组件实现（我的项目中不允许CSS）。由于我是前端新手，不知道正确的解决方案。

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

提前致谢 ：）

Answer 1

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

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

但是，.ant-carouselclassName 是它的父级。

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

尝试这个。

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