vue组件样式穿透（css深度选择器 ::v-deep /deep/ ＞＞＞）

场景复现

当我们使用ant design vue组件库（点击跳转查看相关内容）时，经常会遇到样式无法修改的问题。这是因为 ant design vue 组件库的组件都具有自带的默认样式。

• 通过查询资料后发现是scoped的问题。
• scoped看起来很好用，但是在vue项目中，当我们引入第三方组件库（比如ant design vue UI组件库）时，需要在局部组件中修改第三方组件库的样式，而又不想去除因scoped属性而造成的组件之间样式覆盖的问题。
• 这个时候我们就可以通过 样式穿透 这个特殊方式，穿透原有的默认样式，实现需要的效果。

---

样式穿透

stylus的样式穿透 使用>>>（不推荐）

语法：

• 外层容器 >>> 组件 { }

从组件A穿透到组件B：
.A >>> .B { 
   		background: #fff
}

sass和less的样式穿透（推荐）

这两个常用的样式穿透的方式有两种，分别是 /deep/ 与 ::v-deep。

语法：

• 外层容器 /deep/ 组件 { }
• 外层容器 ::v-deep组件{ }

::v-deep与/deep/都是深度选择器（样式穿透），都能实现对组件内部的样式修改。
（两种方式没有很大的区别，如果用/deep/无效，则换用::v-deep试试，一般都是有效的。）

/* 从A组件深层穿透到B*/
.A /deep/ .B {
  border-color: #fff !important;
}
/* 从C组件深层穿透到button*/
.C ::v-deep button {
  height: 25px;
}
/* 深层穿透到switch*/
::v-deep .ant-switch ::after {
  height: 21px;
  width: 21px;
}

Less和sacc都可以进行 样式叠加（嵌套） 的写法，不过使用样式穿透的时候，写法会有些不一样。

/* 两层嵌套*/
.A ::v-deep {
  button {
    height: 25px;
  }
  .B ::after {
    height: 21px;
    width: 21px;
  }
}

注意： 确保样式嵌套层级正确。

---

文章发展线

本专题文章发展线
css实现鼠标禁用（鼠标滑过显示红色禁止符号）
css样式穿透（/deep/深度选择器）
vue antd项目实战——修改ant design vue table组件的默认样式（css样式穿透）
通过ant design vue的API属性实现不可控操作
vue antd项目实战——根据数据属性实现table表格中行的不可控操作

---

后续将不定期持续更新相关内容~🔥 觉得这篇文章有用的小伙伴们🔥 可以点赞➕收藏➕关注哦~🔥