element样式无法修改

在使用el-form组件时,组件中的字体是黑色的,需要显示白色字体就加了个color:#fff,结果发现修改并没有什么效果:还是原来的黑色
在这里插入图片描述
打开F12发现属于.el-form-item__label选择器下面的,我就在css下面修改了该选择器,但仍然没有效果,但是在浏览器中取消color选项是有效果的:
在这里插入图片描述
在这里插入图片描述
左图是取消color前,右图是取消后;
既然取消color选择可以修改样式但为什么我的修改不生效呢?是因为在style里面有一个属性scoped,该属性作用是实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块,通俗点来讲就是样式仅仅应用到 style 元素的父元素及其子元素。当我把这个属性取消掉就会应该用到我自己设置的颜色了。
在这里插入图片描述
我做的那一块把表单封装了,所以就直接取消了scoped属性,但其实这样做法或许并不可取,上面也说了,可能会影响到全局的样式。资历尚浅,希望大佬指教。
比较好的做法就是,使用el-input的时候添加一个样式类来覆盖el的样式。
在这里插入图片描述
在这里插入图片描述
使用 >>> 和/deep/都可以来覆盖官方的样式。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值