1. 什么是樣式穿透？

樣式穿透是在使用 Vue 組件時，為了修改子組件或第三方組件的樣式而使用的一種特殊語法。當我們使用 scoped 樣式時，由于樣式被限制在當前組件內，要修改子組件的樣式就需要使用樣式穿透。

2. 為什么需要樣式穿透？

2.1 Scoped 樣式的局限性

<!-- 父組件 -->
<template><div class="parent"><child-component class="child" /></div>
</template><style scoped>
.child {/* 這里的樣式只會影響到子組件的根元素 *//* 無法影響到子組件內部的元素 */color: red;
}
</style>

2.2 常見使用場景

1. 修改第三方組件樣式
2. 修改子組件內部元素樣式
3. 覆蓋默認主題樣式

3. 不同版本的樣式穿透語法

3.1 Vue2 中的樣式穿透

<!-- 1. 使用 >>> 操作符 -->
<style scoped>
.parent >>> .child {color: red;
}
</style><!-- 2. 使用 /deep/ -->
<style scoped>
.parent /deep/ .child {color: red;
}
</style><!-- 3. 使用 ::v-deep -->
<style scoped>
.parent ::v-deep .child {color: red;
}
</style>

3.2 Vue3 中的樣式穿透

<!-- 推薦寫法 -->
<style scoped>
/* 方式1：直接作用于子元素 */
:deep(.child) {color: red;
}/* 方式2：從父元素開始 */
.parent :deep(.child) {color: red;
}
</style>

4. 在不同預處理器中的使用

4.1 SCSS/SASS 中的使用

<style lang="scss" scoped>
/* Vue2 中 */
.parent {/deep/ .child {color: red;}::v-deep .child {color: red;}
}/* Vue3 中 */
.parent {:deep(.child) {color: red;}
}
</style>

4.2 LESS 中的使用

<style lang="less" scoped>
/* Vue2 中 */
.parent {/deep/ .child {color: red;}
}/* Vue3 中 */
.parent {:deep(.child) {color: red;}
}
</style>

5. 實際應用示例

5.1 修改第三方組件樣式

<!-- 修改 Element Plus 組件樣式 -->
<template><div class="custom-form"><el-form><el-input v-model="value" /></el-form></div>
</template><style lang="scss" scoped>
.custom-form {/* Vue3 寫法 */:deep(.el-input) {.el-input__inner {border-radius: 8px;border-color: #409EFF;}}
}
</style>

5.2 修改多層級嵌套組件

<style scoped>
.parent {/* 多層級選擇器 */:deep(.level-1) {.level-2 {.level-3 {color: blue;}}}
}
</style>

6. 其他深度選擇器

6.1 插槽選擇器（:slotted）

<style scoped>
/* 修改插槽內容的樣式 */
:slotted(.slot-class) {color: red;
}
</style>

6.2 全局選擇器（:global）

<style scoped>
/* 添加全局樣式 */
:global(.global-class) {color: blue;
}
</style>

7. 版本遷移建議

如果你正在將項目從 Vue2 遷移到 Vue3，建議：

1. 將所有 >>> 替換為 :deep()
2. 將所有 /deep/ 替換為 :deep()
3. 將所有 ::v-deep 替換為 :deep()

8. 總結

樣式穿透是 Vue 中解決組件樣式隔離問題的重要工具：

1. 使用場景：

   • 修改第三方組件樣式
   • 修改子組件內部樣式
   • 處理插槽內容樣式

2. 語法選擇：

   • Vue3 中統一使用 :deep()
   • 避免使用已廢棄的語法
   • 根據預處理器選擇合適的寫法

通過合理使用樣式穿透，我們可以更好地控制組件樣式，同時保持代碼的可維護性和性能。