vant的样式怎么修改不了？

sslcsq

于 2020-04-03 17:20:38 发布

阅读量4.4k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/sslcsq/article/details/105297344

本文介绍如何在Vue项目中利用/deep/选择器，在不移除scoped属性的前提下，成功覆盖Vant UI框架组件的默认样式，实现自定义样式需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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的情况下也能修改组件的样式了