Vue 父组件中修改子组件样式的几种方法

在 Vue 中使用 scoped 样式时，父组件的样式默认无法穿透到子组件。当需要修改子组件内部元素的样式时，有以下几种常用方法：

1. 使用 deep 选择器（推荐）

Vue 3 和 Vue 2.7+ 支持 :deep() 伪选择器：

<style scoped>
.parent :deep(.child-class) {
  color: red;
}
</style>

Vue 2 早期版本使用 /deep/ 或 ::v-deep：

<style scoped>
.parent /deep/ .child-class {
  color: red;
}
/* 或 */
.parent ::v-deep .child-class {
  color: red;
}
</style>

2. 使用全局样式（不推荐）

去掉 scoped 属性，让样式变为全局，然后在父组件中通过类选择器修改子组件样式。但这种方式容易造成样式污染。

3. 使用 CSS Modules

通过 CSS Modules 的 :global 语法来穿透：

.:global(.child-class) {
  color: red;
}

4. 子组件暴露样式接口

最推荐的做法是子组件通过 props 接收自定义类名或样式，由子组件自己控制样式变化。

参考：Vue 官方文档 - Deep Selectors