自定义 react js 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-carousel .slick-slide 添加颜色（这是错误的），您应该将颜色代码添加到 css like dis... 根据您的要求区分颜色

.ant-carousel .slick-slide {
  overflow: hidden;
  height: 160px;
  background: #364d79;
}

.ant-carousel .slick-slide div {
  color: #fff;
}

Answer 2

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

因此，例如，如果您想为旋转木马设置项目符号点的样式，您查看检查工具会看到它们具有 class 个名称：.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

自定义 react js antd ant-carousel 子弹 - 有什么建议吗？

Costumize reactjs antd ant-carousel bullets - Any suggestions?

css

carousel

reactjs

antd