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

Question

尝试更改antd轮播点样式，可以用CSS实现，但不能用styled-components实现（我的项目中不允许使用CSS）。因为我是前端新手，不知道正确的解决方案。

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

预先感谢:)

Answer 1

使用样式化组件时，样式将与 className

sc-...

一起应用。

在您的情况下，其样式将应用于包含

div

的

.slick-slider

。

但是，

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

Answer 2

这是我的 SCSS 样式。首先，我选择了Antd的类，然后为其添加样式。

[class~='ant-carousel'] {
            [class~='slick-slider'] {
              li button {
                    width: 6px;
                    height: 6px;
                    border-radius: 100%;
                  }
               li.slick-active button {
                    width: 7px;
                    height: 7px;
                    border-radius: 100%;
                  }
            }
           
        }