服装化reactjs antd ant-carousel 子弹 - 有什么建议吗？

Question

我正在通过 ant-design (antd) 库开发一个 ReactJS 项目。我想在我的项目中使用 Carousel 组件。当我将内容的背景颜色（应显示在轮播内部）设置为#FFF时，项目符号导航按钮将消失。我应该如何更改子弹的颜色？这是一个普通的轮播：

import { Row, Col, Carousel } from 'antd';
export default class Temp extends Component {
render(){
  return (
    <Carousel vertical autoplay>
      <div>{this.ContentDesign()}</div>
      <div>{this.ContentDesign()}</div>
      <div>{this.ContentDesign()}</div>
      <div>{this.ContentDesign()}</div>
    </Carousel>
)}

这是我的 CSS：

.ant-carousel .slick-slide {
  overflow: hidden;
  height: 160px;
}

谢谢 ：）

Answer 1

一年多后才偶然发现这个问题，但希望这会对某人有所帮助。要设置 Ant Design 组件的样式，您可以在浏览器中打开检查工具并找到要设置样式的部分所使用的类名称。

例如，如果您想为轮播设计项目符号点的样式，您可以查看检查工具，并会看到它们具有类名称：.ant-carousel .slick-dots li button和.ant-carousel .slick-dots li.slick-active button活动项目符号点。

因此，要更改项目符号点的颜色，您只需覆盖已设置的内容即可。示例：

.ant-carousel .slick-dots li button {
    background: #ff4ef6;
    opacity: 0.4;
}

.ant-carousel .slick-dots li.slick-active button {
    opacity: 1;
    background: #ff4ef6;
}

代码沙箱：https://codesandbox.io/s/elegant-rgb-1e2fo?file =/index.css