antd的Carousel走马灯组件的dot也就是下面那个滑动的按钮非常的不起眼。
白色背景的时候完全看不到。
但是我们大部分时候又都是白色背景,于是来自己重写一下样式。
在控制台看了一下,应该是这个属性在控制dot的颜色,重写这个属性就可以了。
直接在对应的less文件里面添加对象,改成黑色。
奇怪,并没有生效,找了一圈发现,应该要写成:
:global {
.ant-carousel .slick-dots li.slick-active button {
background: #000;
opacity: 1;
}
.ant-carousel .slick-dots li button{
background: #000;
}
}
加上一个global后就可以了。
为啥呢?详情请看下面这个链接的介绍。
https://blog.csdn.net/qq_36209248/article/details/90603474
简单来说,为了确保属性的独立性,虽然你写的都是同一个类名,但是你自己写的类名会被转换成一个hash串以免和别的文件重复。
加了global后不会再进行hash,而是直接用你写的名字,这时候就能覆盖掉库里面的默认样式了。