JavaScript中的样式穿透

为何要进行样式穿透？

在前端的项目搭建中往往会用到很多组件以及 vue 框架的使用，这是就会催生出样式无法覆盖的问题，虽然在vue中有scoped 属性可以避免样式污染，但是依旧会有样式无法修改的问题，此时就需要进行样式穿透来覆盖掉组件或者框架中的原有样式

---

样式穿透的用法:

1.普通 css 语法(原生语法)：在修改的样式前添加 >>> 符号

>>> .el-table {
  fborder: none;
}

2. scss 语法 ：在要修改的样式前添加 :: v-deep ,后面空格可有可无

::v-deep .el-table {
  fborder: none;
}

3.sass 语法/less 语法：在要修改的样式前添加 / deep /

//less
/deep/ .el-table {
  fborder: none;
}

//sass
/deep/ .el-table {
  fborder: none;
}

---

注：在 vue 中不同的版本之间语法要求也不同，在 vue2.7 版本及以上版本中 scss 语法中的 ::v-deep 会生效但是会报错，需改成 :deep()

个人笔记，如以上方法如果对您有用还望不吝点赞，谢谢