【vue2/3 修改组件库、子组件样式】当前组件修改子组件样式

首先抛出一个最暴力的方案，但这存在影响其他同名样式的风险。当你意识不到哪出问题的时候，就会让人抓狂。（不推荐的方案！）

涉及到异步组件加载了对应全局样式，又访问了其他页面，选择器相同时则会出现样式不以你预想的情况出现！

// 全局样式
<style>
.customClassName{
    color:red;
}
</style>

---

vue2方案：

在<style scoped>内使用 >>> 或 /deep/ ，vue2时期我一直统一用的是/deep/ ，避免>>>无法解析的问题。

• 有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

<style scoped>
.currComponent >>> .el-dialog .el-dialog__body{
  padding: 10px;
}
</style>

// 或者
<style scoped>
.currComponent /deep/ .el-dialog .el-dialog__body{
  padding: 10px;
}
</style>

---

vue3 推荐方案：

vue2的写法在vue3 仍然可以使用，但vue3 文档只写了 :deep() 这一个API案例，为了统一风格和提高规范，建议按照v3文档 使用 :deep() 。

<style scoped>
.currConponentName :deep(.el-dialog .el-dialog__body){
  padding: 10px;
}
</style>

<style scoped>
.currConponentName /deep/ .el-dialog .el-dialog__body{
  padding: 10px;
}
</style>

---

细心的大佬朋友们也许会发现，无论 >>> /deep/ 还是 :deep() 都是写在 .el-dialog .el-dialog__body前。此处进行原因分析、解释：

1. 首先 scoped 特性会使组件自身的所有元素增加唯一标识属性(例如： `data-v-7d766012`)，并且编译后CSS选择器也会有这段唯一标识。注意！是组件自身的元素。不包括子组件、父组件！
2. 特例：子组件的根节点会同时被子组件和父组件的样式影响！这是为了方便父组件对子组件进行布局！但是仅限于根组件，如果子组件没有根节点，如VUE3的片段特性（多根节点），则无效。
3. 重点来了：在deep前的选择器，是会带上唯一标识的，deep后面的选择器是不会带上这唯一标识！如果带上了父组件的唯一标识，自然匹配不上子组件对应的元素属性，就会不生效。

代码案例解释：

• 此处举例拿3个类名是为了让例子更浅显易懂 ~~

<style scoped>
.a :deep(.b .c) {
  /* ... */
}
</style>

// 编译结果如下
.a[data-v-f3f3eg9] .b .c{
  /* ... */
}

.a是当前组件的类名，data-v-f3f3eg9 是当前组件的唯一标识， .b .c是你想影响的子组件的对应类名的样式！
这时候当前组件的.a自然匹配的上， .b .c 由于不存在父组件的唯一标识，自然也就匹配的上子组件对应的.b .c


！！如果是 .a[data-v-f3f3eg9] .b[data-v-f3f3eg9] .c
由于是唯一标识， .b自然不可能是 data-v-f3f3eg9

此时这就匹配不到子元素对应的class='b'，自然也无法将样式作用于 class='c' ！！