在 Vue 中，当使用 <style scoped> 时，组件的 CSS 会被自动封装（通过添加 data-v-xxxx 属性选择器），这是为了避免父组件的样式意外污染子组件。但当我们确实需要修改子组件样式时，就需要使用样式穿透（style penetration）技术。以下是关键原因和用法解析：

一、为什么需要样式穿透？

1. Scoped 样式限制
   默认情况下，scoped 样式只能作用于当前组件的 DOM 元素。如果父组件想要覆盖子组件的默认样式，直接书写子组件的类名会被 data-v-xxxx 属性选择器阻挡。

/* 父组件样式（无法生效） */
.child-component .title {
  color: red; /* 实际生成的选择器：.child-component .title[data-v-parent] */
}

2. 子组件内部 DOM 不可控
   第三方组件库（如 Element UI、Vuetify）的子组件 DOM 结构对父组件不透明，但需要微调其样式时，必须穿透作用域。

二、样式穿透语法及原理

1.原生 CSS：>>>

适用于原生 CSS，部分预处理器可能不支持。

.parent >>> .child-inner {
  color: red;
}

2.SCSS/SASS：::v-deep或:deep()

Vue 3 推荐使用 :deep()，更符合 CSS 规范。

.parent {
  ::v-deep .child-inner { /* Vue 2 写法 */ }
  :deep(.child-inner) {  /* Vue 3 写法 */ }
}

3.原理

穿透语法会 移除选择器链中的 data-v-xxxx 属性限制，使样式能够作用于子组件内部元素。编译后：

[data-v-parent] .child-inner { color: red; }

三、使用场景示例

<template>
  <!-- 子组件（假设内部有一个类名为 .inner-element 的元素） -->
  <ChildComponent />
</template>

<style scoped>
/* 穿透写法 */
.parent-class :deep(.child-component .inner-element) {
  padding: 20px;
  background-color: #f0f0f0;
}
</style>

四、注意事项

1. 慎用穿透
   过度使用会破坏组件封装性，优先通过子组件暴露的 CSS 变量（CSS Custom Properties）或 Props 控制样式。
2. Vue 3 语法统一
   Vue 3 废弃了 >>> 和 ::v-deep，推荐使用 :deep() 伪类。
3. 预处理器兼容性
   确保构建工具（如 Webpack、Vite）配置的预处理器（Sass/Less）支持穿透语法。

总结

样式穿透是 Vue 组件化开发中解决作用域样式隔离的妥协方案，合理使用可灵活定制子组件样式，但需注意维护性和组件设计合理性。