vue 修改vant自带的样式过程
更新时间：2022年04月26日 11:01:54 作者：_仰望星空的你
这篇文章主要介绍了vue 修改vant自带的样式过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
修改vant自带的样式
今天用vue写页面时，发现使用vant的有些UI组件，而又不能满足自己的样式，修改CSS样式还是无效。
css一般都会使用sass或者less，加了scoped后修改的样式不起作用，即使加了important也没用。
在vue项目中，当style 标签有scoped属性时，它的 CSS 样式只作用于当前组件中的元素，父组件的样式将不会渗透到子组件中。
解决办法
1.对于css语法起作用
使用深度选择器，使用 >>> 操作符，将scoped样式中的选择器“深入”，即影响子组件
上述代码将会编译成：
2.对于scss，less这类的预处理器
使用 /deep/ 操作符取而代之——这是一个 >>> 的别名
代码如下：
这样修改样式就有效啦。
vant的样式怎么修改不了？
在vue中写<style lang="scss" scoped> 时候都要加上这个 scoped 用于避免全局污染
但是加上了scoped会导致无法修改 vant 框架组件中本身的样式但是scoped我们不能去掉
即使写不了vant中的样式我们也不能去掉那么在怎么不去掉的情况下实现样式呢？
如果有scss的话只要在原有的样式类前面加 /deep/ 即可
/deep/ .van-cell{
background: #F39894;
color: white;
}
/deep/ .van-icon::before{
color: white;
}这样就可以在有scoped的情况下 也能修改组件的样式了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了在vue中如何通过iframe方式加载本地的vue页面的解决方法，文中有详细的解决流程,需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了Vue实现省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
本文主要介绍了elementUI弹窗里的表单重置不生效问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了vue3+ant design的form数组表单，如何校验,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2023-09-09
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
这篇文章主要介绍了解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本篇文章主要介绍了利用Vue v-model实现一个自定义的表单组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了vue-amap根据地址回显地图并mark的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Vuex数据持久化的两种方式:手动存储和vuex-persistedstate插件详解
这篇文章主要介绍了Vuex数据持久化的两种方式:手动存储和vuex-persistedstate插件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
用户可以多文件上传 ,在上传到服务器之前需要检查服务器中有无重名的文件,如果有会返回重名文件的名称数组,这些文件需要一个一个的向用户确认是否要覆盖重传,这篇文章主要介绍了elementui上传文件不允许重名,需要的朋友可以参考下2024-02-02
key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧Nodes对比时辨识VNodes。这篇文章主要给大家介绍Vue中key的作用，感兴趣的朋友跟随小编一起看看吧2020-06-06
最新评论