样式穿透区别 !、!deep! 、!v-deep 、!deep(＜inner-selector＞)

1. >>>

用于原生 CSS 样式穿透

#picker >>> .header {
  width: 100%;
  height: 200px;
}

2. /deep/

如果项目使用了预处理器 scss 、less 等 css 预处理器，则可以使用 /deep/
注意：vue-cli3 以上版本不可以

#picker /deep/ .header {
  width: 100%;
  height: 200px;
}

3. ::v-deep

不适用于 vue3 scss 场景 其他场景通用

#picker ::v-deep .header {
  width: 100%;
  height: 200px;
}

4. :deep()

vue3 项目，使用 scss 预处理器，推荐使用 :deep() 语法，否则会报如下警告

::v-deep usage as a combinator has been deprecated. Use :deep(＜ inner-selector ＞) instead

#picker :deep(.header) {
  width: 100%;
  height: 200px;
}