Angular Material设置mat-radio-button文本颜色不生效解决方法

AI 小北

2026-9-3

Angular Material 单选按钮文本颜色不生效修复方案

问题根源

Angular 组件默认开启样式封装（ViewEncapsulation.Emulated），直接给mat-radio-button组件标签写样式，无法穿透到组件内部承载文本的.mat-radio-label-content节点。
原有选择器mat-radio-group mat-radio-button .radio_button逻辑错误：.radio_button是直接加在mat-radio-button上的类，不是它的子元素，该选择器匹配不到任何DOM节点。
原有样式里写的颜色值是#556EE6，和目标值#262D34不一致。

可用修复方案

方案1：无依赖稳妥方案（推荐）

直接给单选按钮的文本内容套一层自定义标签，不依赖Material内部类名，不会随组件版本升级失效：

修改模板代码

<mat-radio-group aria-label="Select an option" style="display: flex; flex-direction: column">
   <mat-radio-button value="1">
     <span class="radio_button">Roman Dyshko</span>
   </mat-radio-button>
   <mat-radio-button value="2">
     <span class="radio_button">Roman Dyshko</span>
   </mat-radio-button>
</mat-radio-group>

编写对应SCSS

.radio_button {
   font-family: 'Work Sans', serif;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 150%;
   text-decoration-line: underline;
   color: #262D34;
}

方案2：使用::ng-deep穿透样式封装

如果不想修改模板结构，可以用穿透选择器直接命中Material组件内部的文本节点，注意加:host前缀避免样式污染全局：

:host {
  .radio_button {
    font-family: 'Work Sans', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    text-decoration-line: underline;
  }
  // 穿透命中组件内部文本节点
  .radio_button ::ng-deep .mat-radio-label-content {
    color: #262D34;
  }
}