CSS样式穿透 ::v-deep 和 /deep/ 以及 ＜＜＜

---

前言

之前在使用 element ui 的输入框时遇到一个问题，上GitHub的 issue 上也发现有人反映这个问题。在寻找解决方案的过程，了解很认识到 CSS样式穿透这个知识点（其实应该很多人都知道，hhh，初学很多不了解，请多多指教）。这里就稍稍总结一下，避免遗忘吧~~

---

一、为什么需要样式穿透

如图，我们可以看到上面的显示输入字数的部分对内容会有遮挡的情况，但这是个element ui 的原生组件，它有自己的CSS样式，我们一般的外部修改一般不起作用，那么我们如何才能让它不会影响到内容的显示呢？这里我们就通过样式穿透来强制进行修改啦。
我们先在浏览器 F12 找到这个组件的类名。
样式穿透

& ::v-deep .el-textarea__inner{
padding: 5px 15px 38px 15px;
}
//并且给el-input加了个 autosize 来调节高度

这样就会和文本内容隔开一行，并且通过 autosize 会自动增加高度，就不会出现遮挡的情况了。

那么说完如何解决这个问题后，我们来认识一下 CSS样式穿透的的用法和一下注意点等。

二、如何使用样式穿透

• 作用 ： 当我们使用 UI组件库，一般不能对其样式进行修改，但我们通过穿透可以进行修改。
• 用法

//如果使用的是css，可以用下面这种
外层容器 >>> 组件 {}

//但在css预处理器中用上面这种是无法生效的，类似在scss和less中，我们可以用下面这种。
外层容器 /deep/ 组件 {}

//但有些时候上面那种也没反应的时候，我们可以试一下下面这种
//我也不清楚为什么，但看比较多资料说，一般用下面这种各个方面会比较好。
外层容器 :: v-deep  组件 {}

补充上面：vue3.0的环境下，安装项目时选择了dart-sass，这个不支持/deep/和>>>的写法，只能用::v-deep，选择node-sass就不会（咋感觉还不是根源，不知道::v-deep的出处是哪里来的）

代码案例

//比如我们遇到需要对element ui 里面 el-avatar这个组件进行修改
el-avatar {
      ::v-deep .iconfont {
        font-size: 24px;
        color: #6B98B7;
        background: #fff;
      }

• 注意：要保证层级关系是对的，这个很重要我之前就有个一直没有生效后面才发现，层级不对
• 其次还得注意多层嵌套的时候，存在的失效问题看这篇文章

---

总结

CSS穿透给我们带了了很大的便利，对于修改 UI组件库的样式时候。毕竟官方提供给我们的，不一定就完全合适我们的需求，我们需要根据自身有适当的修改。