vue3修改vant以及其他第三方样式库并不影响别的页面

最新推荐文章于 2024-10-16 14:29:46 发布

怎奈你何

最新推荐文章于 2024-10-16 14:29:46 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： css vue.js

本文链接：https://blog.csdn.net/z3287852/article/details/126483489

版权

vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文介绍了在Vue3中使用scoped属性来防止CSS全局污染，确保组件样式只作用于当前组件。当需要修改第三方库样式时，通过:deep()选择器可以穿透scoped限制。亲测有效的方法，适用于需要在保持样式隔离的同时调整第三方组件样式的情景。

摘要由CSDN通过智能技术生成

1.需要场景

当在vue3中 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，防止样式的全局污染，尤其是在我们引用第三方库的，可能它们没有达到我们的要求，我们需要去修改第三方的样式，如果我们不加scoped的时候可能在别的页面也会修改我们的样式

如下

<style scoped>
 .mainBox{
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: #0d0f7f;
 }
:deep(.van-nav-bar) {
    background: #0d0f7f;  
}
:deep(.van-nav-bar .van-icon) {
   color: #FFF;
}
:deep(.van-nav-bar__title) {
  color: #FFF;
}

.withdr{
 display: flex;

}

</style>

:deep()括号内的标签就是第三方样式库的标签，当style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，不影响其他的页面。

亲测有效

参考自：https://www.jianshu.com/p/ebc01f97fabf

以及：https://www.cnblogs.com/zgxhh/p/16493658.html