vant如何去除组件默认的样式,

　　本文主要介绍了vue如何利用vant组件的field组件disabled来修改默认样式，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　使用vant组件禁用的field组件修改默认样式vue vant修改样式1。当样式没有范围2。当有范围时

使用vant组件的field组件disabled修改默认样式

　　因为vue会在开发时添加style和scoped以避免全局污染，所以在正常开发时直接修改外部组件(vant)的样式不会生效。在我们删除scoped之后，我们会发现样式可以生效。

　　但是scoped肯定是不可或缺的。

　　所以我们可以用/deep/(深度)来修饰样式。

　　举例 —— 修改vant —— field组件disabled情况下的字体默认样式

　　/深/。van-field__control:禁用，

　　/深/。van-field__control[disabled] {

　　颜色：# 000；

　　不透明度：1；

　　-WebKit-text-fill-color:# 000；//ios和Android 9.0必须添加该属性才能生效。

　　-WebKit-不透明度：1；

　　}

　　/deep/方法放弃了使用最新版本的建议

vue+vant修改样式

1.当style没有scoped时

　　在浏览器的开发工具中找到要修改的组件(F12)

　　例如，如果我需要修改这个span中的文本大小，我可以找到class=。van-tab _ _ textellipsis ，然后直接在你的样式里写样式，这样会覆盖原来vant组件的默认样式。

2.有scoped时

　　很多时候我们只想修改当前页面的这个组件样式，所以不可避免的要使用scoped。但是如果还是像上面的方法修改，会发现修改无效，这时就需要使用深度选择器了。

　　可以在项目中使用的Css原生样式，然后就可以直接使用了。a .b {

　　}

　　/deep/(与：v-deep相同)

　　/深/

　　/*这边*/。一个{

　　/深/。b {

　　}

　　}

　　/*或者这个*/。a/深/。b {

　　}

　　例如，在这里：

　　一个注意事项：有些朋友这个时候可能还没有找到班级的上一个班级，比如。上图中的van-tabscard，所以只需自己把要修改的组件包装在一个div中，并为其定制一个类即可。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。