Vue.js 中使用 scoped 属性来限制样式只作用于当前组件的元素。但有时候我们需要修改子组件或第三方库组件中的样式，这时候就需要用到“样式穿透”。
1. 深度选择器（::v-deep）
Vue 提供了 ::v-deep 伪元素，用于样式穿透。
<template><div class="parent"><child-component /></div>
</template><style scoped>
/* 通过 v-deep 修改 child-component 内部的样式 */
.parent ::v-deep .child-element {color: red;
}
</style>
2. >>> 和 /deep/ （已废弃）
在 Vue 2.x 中，>>> 和 /deep/ 是样式穿透的语法，它们已经被废弃，推荐使用 ::v-deep。
<style scoped>
/* 旧写法，不推荐使用 */
.parent >>> .child-element {color: red;
}/* 或者 */
.parent /deep/ .child-element {color: red;
}
</style>
3. !important
有时为了确保样式应用优先级，你可能需要在样式中加上 !important。例如：
<template><el-button class="custom-button">Button</el-button>
</template><style scoped>
/* 强制覆盖 Element UI 中 button 的样式 */
::v-deep .el-button.custom-button {background-color: red !important;
}
</style>
4. 通过全局样式覆盖
如果样式穿透不能满足需求，或者样式需要全局应用，可以通过修改全局样式文件来覆盖子组件的样式。
5. 修改子组件内部样式
在一些场景下，如果你有权修改子组件，最好的方式是直接在子组件中提供修改样式的能力，或者使用 props、class 来传递自定义样式。
什么时候使用样式穿透？
- 修改第三方库的样式，例如 Element UI、Vant 等。
- 组件嵌套较深，某些样式需要定制。
- 父子组件样式之间存在特殊的依赖关系。
总结
“样式穿透”是一个有用的技巧，可以帮助你在 Vue 组件中更灵活地定制样式。但在使用时要注意其维护性和可读性，确保代码仍然易于理解和修改。