css - 自定义 react js antd antd-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