时间戳

首页 > 解决方案 > 如何使用样式化组件更改 antd 轮播点的形状和颜色

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

问题描述

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

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

提前致谢 ：）antd 轮播

标签： reactjsantdstyled-components

解决方案

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

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

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

推荐阅读