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

　　本文主要介绍vue无法覆盖vant的UI组件的样式问题，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　无法覆盖vant的UI组件的样式。使用样式穿透来强制覆盖Vant的原始样式。这是在浏览器中可以看到的组件的原始样式。

无法覆盖vant的UI组件的样式

　　有时候UI组件提供的默认样式不能满足项目的需求，我们需要修改它的样式，但是发现添加scoped后修改的样式并不起作用。

解决方法

　　使用深度选择器“向下钻取”作用域样式中的选择器，即影响子组件。

　　样式范围。a .b { /*.*/}

　　/风格

　　以上的代码会编译成：。a[data-v-f3f3eg9]。b { /*.*/}

　　注意：如果使用Less或Sass这样的预处理程序，可能无法正确解析。

　　在这些情况下，您可以使用/deep/或：v-deep组合——两者都是别名，工作方式完全相同。

　　使用Less或Sass等预处理器的写法如下：。面包车-收音机{

　　/深/。van-radio__label {

　　宽度：500px

　　}

　　}

使用样式穿透，强制覆盖Vant原样式

　　在使用Vant组件时，我们会发现组件原有的风格在某些情况下并不符合我们的需求。这时，我们需要重写组件的原始样式。

这个是组件的原样式

　　因为style标签增加了scope属性，scope会保护样式不被污染。在这里，为了使我们自己的样式生效，我们必须使用样式渗透，从父样式到子样式：所有人。van-field _ _ control { text-align:right；}

在浏览器可以看到

　　列text-align: left已被一条水平线删除，并替换为：

　　而这是因为风格渗透是用来强行覆盖原有风格，从而达到我们需要的风格效果。

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

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