vue2中样式如何动态穿透

在 Vue.js 2.x 中，如果你想让组件内的样式动态地影响到其父组件或其他祖先组件，通常可以借助 CSS 的一些特性来实现样式穿透。主要有两种常见的方式：

1. **Scopable CSS Modules** (Vue CLI 提供的预处理器如 SASS 或 Less 配合 `scoped` 和 `mixins`/`:global`): 当你使用 scoped CSS（`.vue` 文件内默认开启），只有直接作用于当前组件的元素才会应用该样式。但是，你可以通过引入全局变量（例如 `$custom-global`）或者使用 `::v-deep` 或 `>>>` 伪类来将样式的穿透范围扩大。

<style scoped>
.some-class {
  color: $custom-global;
}
</style>

// 穿透给所有祖先组件
<style lang="scss">
$custom-global: red;

.some-component {
  @include some-mixin() {
    .some-child::v-deep .some-class {
      color: blue;
    }
  }
}
</style>

2. **CSS Inheritance** 或者 **CSS Modules with Global Styles** 如果你不想使用 CSS Modules，也可以在全局 CSS 文件中设置样式，然后利用 CSS 继承传递给子孙组件。这种方式下，你需要确保祖先组件也包含了那些需要修改的基础样式。

/* global.css */
body {
  color: black;
}

/* componentA.vue */
<style>
.componentA {
  color: red;
}
</style>

/* componentB.vue (如果需要红色文字) */
<style>
.componentB {
  color: inherit;
}
</style>