Costumize reactjs antd ant-carousel bullets - Any suggestions? - css

Question

I'm developing a reactjs project by ant-design (antd) library. I want to use Carousel component in my project. When I put the background color of the content -which should be shown inside the carousel- to #FFF, the bullet navigation buttons will be disappeared. How should I change the color of the bullets? This is a normal Carousel:
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>
)}
and this is my CSS:
.ant-carousel .slick-slide {
overflow: hidden;
height: 160px;
}
Thanks :)

Answer 1

Just stumbled upon this question over a year later, but hopefully, this will be of help to someone. To style Ant Design components, you can open the inspect tool in your browser and find the class name used on the part you want to style.
So for example, if you want to style the bullet points for the carousel, you look in the inspect tool and will see that they have the class names: .ant-carousel .slick-dots li button and .ant-carousel .slick-dots li.slick-active button for the active bullet point.
So to change the colour of the bullet point you simply have to override what is already set. Example of this:
.ant-carousel .slick-dots li button {
background: #ff4ef6;
opacity: 0.4;
}
.ant-carousel .slick-dots li.slick-active button {
opacity: 1;
background: #ff4ef6;
}
Code Sandbox: https://codesandbox.io/s/elegant-rgb-1e2fo?file=/index.css

Answer 2

Assuming that you are adding color directly to .ant-carousel .slick-slide (which is wrong),
You should add color code to css like dis... Differentiate color based on your requirement
.ant-carousel .slick-slide {
overflow: hidden;
height: 160px;
background: #364d79;
}
.ant-carousel .slick-slide div {
color: #fff;
}