【Vue3】样式穿透

在项目中出现的问题：

在引用UI组件输入框 <el-autocomplete> 时，样式出现了如下问题，边距多了1px导致输入框与边框分离。

 根据我之前的经验，只要改变其外部样式就可以了。在此之前我都是选用less预处理器，然后使用 /deep/ 深度选择器修改第三库引入的组件。但是修改失败。

解决：

经过查了大量博客，发现我当前选用的时scss预处理器，那么只能用 ::v-deep

    ::v-deep .el-input__wrapper {
      padding: 0;
    }

总结三者的区别：

>>>

深度作用选择器的简写形式

1. 只作用于css，不支持css预加载器（less/scss）
2. 是/deep/的简写形式,适用于Vue2.x版本，Vue3.x版本使用会报错

/deep/

Vue2.x的深度作用选择器正式写法

1. 仅适用于Vue2.x版本
2. 支持css预加载器

::v-deep

Vue3.x的深度作用选择器正式写法

总结

Vue2.x版本使用优先级 /deep/  >     >>> Vue3版本使用::v-deep