在 Vue.js 中，当你使用像 Element UI 这样的 UI 库时，它们的样式通常是全局的，即使你在组件中使用了 scoped 样式（为什么要用scoped），仍然可能需要对这些全局样式进行修改。

为了实现这一点，样式穿透（deep selector）就成为了一种重要的工具。

下面我们以一个名为 AComponent 的组件为例，说明为什么要使用样式穿透，及如何使用不同的穿透选择器（:deep、::v-deep、>>>）来修改 Element UI 的样式。

1. 组件示例

假设我们有一个 AComponent.vue，其中使用了 Element UI 的按钮组件：

<template><div class="my-component"><el-button class="my-button">点击我</el-button></div>
</template><script>
export default {name: 'AComponent',
};
</script><style scoped>
.my-button {background-color: blue; /* 这条样式不会生效，因为 Element UI 的样式优先级较高 */
}
</style>

在这个示例中，我们尝试改变 Element UI 按钮的背景色，但由于按钮的样式是全局的，scoped 样式不会影响到它。

2. 使用样式穿透

为了能成功修改 Element UI 的样式，我们可以使用样式穿透选择器。

2.1 使用 :deep

<style scoped>
.my-component ::v-deep .el-button {background-color: blue; /* 通过 ::v-deep 选择器，成功改变 Element UI 按钮的背景色 */
}
</style>

2.3 使用 >>>

<style scoped>
.my-component >>> .el-button {background-color: blue; /* 通过 >>> 选择器，成功改变 Element UI 按钮的背景色 */
}
</style>

2.4 使用 /deep/(已弃用，不推荐)

这种方法曾经是 Vue 中的样式穿透方式，但现在已经被弃用，不建议再使用。 因为它会导致样式全局生效，容易造成冲突。

3. 为什么使用样式穿透

• 封装性与可维护性：尽管 Element UI 的样式是全局的，使用样式穿透可以在组件内部控制样式，使组件更加封装和可维护。
• 样式覆盖：样式穿透允许我们覆盖第三方库的样式，以满足具体的设计需求。
• 灵活性：当设计需求变化时，开发者可以快速调整组件的样式，而不是修改全局样式。

总结

使用样式穿透（如 :deep、::v-deep 和 >>>）能够让开发者在使用 UI 库时灵活地控制和修改样式，确保组件的样式符合设计要求，同时保持良好的组件封装性。在实际开发中，根据个人或团队的偏好选择合适的穿透选择器即可。