antd Carousel 重写dot样式

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;
  }
}
1
2
3
4
5
6
7
8
9

加上一个global后就可以了。
为啥呢？详情请看下面这个链接的介绍。
https://blog.csdn.net/qq_36209248/article/details/90603474

简单来说，为了确保属性的独立性，虽然你写的都是同一个类名，但是你自己写的类名会被转换成一个hash串以免和别的文件重复。
加了global后不会再进行hash，而是直接用你写的名字，这时候就能覆盖掉库里面的默认样式了。