vue项目中/deep/的用法-vue-cli中没法覆盖样式解决方法

Vue CLI样式穿透：/deep/与:deep()的使用

原创已于 2022-08-14 22:34:09 修改 · 3.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2022-08-07 22:35:33 首次发布

笔记同时被 2 个专栏收录

117 篇文章

订阅专栏

vue

47 篇文章

订阅专栏

在Vue CLI项目中遇到子组件样式覆盖问题时，可以使用/deep/或:deep()深度选择器来解决。当 scoped 属性存在时，组件样式不会影响子组件。本文介绍了如何通过添加/deep/或:deep()来穿透作用域，确保样式正确应用到子组件上，特别提到了/deep/在Vue 2中的使用和在Vue 3中被:deep()替代的事实。

在vue-cli项目中，我们在二次覆盖样式的时候会遇到这个问题，就是在控制样式的时候，复制了类名，但是设置了样式会没有。

解决方式：在样式前面加一个 /deep/

<style lang="less" scoped>
.Home-container {
  padding: 46px 0 50px 0;
  .van-nav-bar {
    background-color: #007bff;
    color: white;
  }
  // 需要加 /deep/ 才能控制到它
  /deep/ .van-nav-bar__title{
  color: white;
  }
}
</style>

具体可以总结如下图：