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;
  }
}

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值