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 实例更好的监听事件及vue实例的方法,介绍了一种新增 vue 实例的方法，单独监听事件，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue-cli安装使用less的教程，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要为大家详细介绍了Vue实现点击时间获取时间段查询功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
本篇文章主要介绍了vue引入swiper插件的使用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要为大家介绍了VUE render函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了Vue.js 2.0 移动端拍照压缩图片上传预览功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
这篇文章主要介绍了前端token中4个存储位置的优缺点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue2 el-table行悬停时弹出提示信息el-popover的实现
本文主要介绍了vue2 el-table行悬停时弹出提示信息el-popover的实现,用到了cell-mouse-enter、cell-mouse-leave两个事件,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计.这篇文章主要介绍了VueJs 填坑日记之初识 *.Vue文件,需要的朋友可以参考下2017-11-11
在前端 Vue 项目打包后，如果需要访问另一个域名下的接口，由于浏览器的同源策略限制，会出现跨域问题，本文就介绍一下vue项目打包部署跨域的实现步骤，感兴趣的可以了解一下2023-05-05
最新评论