vue使用vant,vue+vant

　　本文主要介绍vue修改vant自身风格的过程，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。

目录

　　修改vant自己的风格解决方案为什么vant的风格不能修改？

修改vant自带的样式

　　今天用vue写页面的时候，发现用了vant的一些UI组件，但是满足不了自己的风格。修改CSS样式还是无效。

　　一般css用sass或者更少，加了scoped后修改的样式不管用，即使加了important。

　　在vue项目中，当style标签有scoped属性时，其CSS样式只作用于当前组件中的元素，父组件的样式不会渗透到子组件中。

解决办法

　　1.它适用于css语法

　　使用深度选择器，并使用操作符“深入”作用域样式的选择器，也就是说，影响子组件。

　　上面的代码将被编译成：

　　2.对于scss及以下的预处理程序

　　使用/deep/运算符代替——，它是的别名

　　代码如下：

　　这将使修改样式变得有效。

vant的样式怎么修改不了？

　　编写样式lang=scss 的作用域在vue中，其作用域是为了避免全局污染。

　　但是scoped的加入会使vant框架组件的样式无法修改，但是scoped是不能移除的。

　　即使我们不能在vant中编写样式，我们也不能删除它。那么，如何在不移除样式的情况下实现样式呢？

　　如果有scss，就在原来的style类前面加/deep/。

　　/深/。van-cell

　　背景：# F39894

　　颜色：白色；

　　}

　　/深/。van-icon:之前{

　　颜色：白色；

　　}

　　这样，即使有作用域，也可以修改组件的样式。

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

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