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

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