解决vant中更改默认样式

vant组件中,组件内部创建的元素,因为有scoped属性,所以更改vant组件内部样式的时候,css样式没法生效.

scoped:只对本页面样式生效,优先级较高,vant组件没有规律可言.

这时候出现了::v-deep深度选择器

1.在需要修改的样式中添加新类名覆盖掉或找准精确定位

<van-cell-group>
     <van-field label="密码" value="密码修改" class="password" />
     <van-field label="手机号" value="手机号" />          
</van-cell-group>

2.对指定样式中内容进行穿透设置(注意,此时使用的是scss写法!)

 .password{
    ::v-deep .van-field__control{
     color: #365EEF;
     }
  }

3.此时样式就修改完成了!

普通的样式修改可添加类名覆盖组件内部类名进行设置.