element-UI 组件样式修改小坑

今天在修改element-UI组件样式的时候,因为自己疏忽踩了一个小坑导致浪费了不少时间特此记录一下。

案例:

在使用侧边导航栏的时候,发现ele默认设置了20px的左内边距。
在这里插入图片描述
起初我忽略了权重问题,没有注意到此项样式是采用的行内样式设置的,结果在通过各种类选择器修改通通失败的情况下,发现了问题的所在。
这里再回顾下各选择器的权重:
在这里插入图片描述
这个时候由于我们通过类选择器的方式设置样式权重小于行内样式都会被覆盖掉,就会倒是不管何种方法都修改失败。此时就需要我们引入 !iimportant 来提升当前样式的权重,此时再通过样式穿透的方法就可以成功覆盖掉ele默认的行内样式了。
在这里插入图片描述
目前ele样式都可以自定义修改了,以后如果再遇到什么奇葩的坑再来补充

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值