Element Plus单文件组件如何正确覆盖el-radio-button渲染样式

Vue单文件组件的scoped样式编译时，会给当前组件模板内的原生DOM元素注入唯一的自定义data属性（比如你在DOM里看到的data-v-bf51d4b2），同时所有CSS选择器末尾会自动拼接对应的属性选择器，确保样式只作用在当前组件的元素上。
Element Plus的el-radio-button属于第三方子组件，它渲染生成的内部节点（label.el-radio-button、span.el-radio-button__inner）默认不会携带当前组件的scoped标识属性，所以你写的选择器编译后根本匹配不到目标元素，哪怕加!important也不会生效。

优先使用深度选择器穿透scoped限制，不会造成全局样式污染：

• 用:deep()伪类包裹第三方组件的类名，编译时这部分选择器不会拼接scoped属性标识，就能正确匹配子组件渲染的内部元素

<style lang="scss" scoped>
:deep(.el-radio-button) {
  color: red;
  padding: 20em;

  .el-radio-button__inner {
    color: blue;

    &:hover {
      color: red;
    }
  }
}
</style>

• 为了避免样式意外影响页面内其他同类组件，建议给当前的el-radio-group加自定义类名做命名空间隔离，精准控制样式生效范围：

<template>
  <!-- 给单选组加自定义类 -->
  <el-radio-group v-model="selected" class="theme-radio-group">
    <el-radio-button value="Karthus">Karthus</el-radio-button>
    <el-radio-button value="Other">Other</el-radio-button>
  </el-radio-group>
</template>

<style lang="scss" scoped>
.theme-radio-group {
  // 深度选择器写在自定义类内部，仅对当前单选组生效
  :deep(.el-radio-button) {
    color: red;
    padding: 20em;

    .el-radio-button__inner {
      color: blue;
      &:hover {
        color: red;
      }
    }
  }
}
</style>

如果需要做全局的组件样式统一覆盖，可以新增一个不带scoped标识的style块，同样要加顶层命名空间避免全局污染：

<style lang="scss">
/* 用页面根节点类做隔离，避免影响其他页面 */
.radio-page {
  .el-radio-button {
    color: red;
    padding: 20em;

    .el-radio-button__inner {
      color: blue;
      &:hover {
        color: red;
      }
    }
  }
}
</style>

注意：不建议通过给组件加内联style的方式修改内部元素样式，内联样式只会作用在组件根节点，无法命中组件内部的深层节点，后期维护成本也更高。

内容的提问来源于stack exchange，提问作者cSharp