reactjs - 如何使用样式组件更改 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 是其父级的类名。

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

试试这个。

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