样式穿透 >>>、/deep/ 、::v-deep 、:deep(<inner-selector>)应用场景

标签：__ el 场景 样式 deep 穿透 组件

在vue中，我们为了避免父组件的样式影响到子组件的样式，会在 <style> 标签上设置scoped属性，这样它的 CSS 只会应用到当前组件的元素上，即使父组件中有跟子组件相同的class名称或者选择器的时候，也不会影响到子组件的样式。

但是有的时候我们需要在一个组件中改变被引入组件的样式（即父组件改变子组件的样式），直接使用class命名改变样式没有任何反应

1、 >>> 应用场景

如果项目使用的是原生css 样式，那么你可以直接使用 >>> 穿透

#se >>> .el-input__inner {
  line-height: 32px;
  height: 32px;
}

2、/deep/ 应用场景

如果项目使用了预处理器 scss 、less ，>>>可能会因为无法编译而报错 。可以使用 /deep/ 穿透

注意：vue-cli3以上版本不可以

#se /deep/.el-range-editor.el-input__inner,
.el-select {
  width: 100%;
}

3、::v-deep 应用场景

如果项目使用了预处理器，::v-deep 通用

::v-deep .el-tooltip__popper {
    max-width: 30px;
}

4、:deep() 应用场景

vue3.0项目，如果使用了sass预处理器，使用::v-deep深度选择器会抛出如下警告

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead. 原因：vue3.0 单文件规范，::v-deep写法已经被废弃了，修改为如下方式

:deep(.el-tooltip__popper) {
    max-width: 30px;
}

标签：__,el,场景,样式,deep,穿透,组件
From： https://www.cnblogs.com/zjianfei/p/17014748.html