Angular中Material UI组件文本颜色不继承调色板的解决方法

问题 #

Angular Material的Issue#26153指出：自定义调色板中的contrast配置不会作用于单选框、复选框等组件的标签文本颜色。你的当前实现（组件代码+Sass主题配置）无法通过调色板的contrast设置改变标签颜色，环境为Angular 17.3.2、CDK/Material 17.3.2。

你的组件代码 #

<mat-radio-group color="primary" [(ngModel)]="filterDateType" (change)="changeDate()">
  <mat-radio-button value="create" class="mx-1 mx-xxl-2 py-1">تاریخ ایجاد</mat-radio-button>
  <mat-radio-button value="update" class="mx-1 mx-xxl-2 py-1">تاریخ به‌روزرسانی</mat-radio-button>
</mat-radio-group>

你的Sass主题配置 #

$light-primary-text: red;
$dark-primary-text: green;
$revolut-primary-palette: (
  100: #bcdffc,
  500: #2c9bf6,
  600: #2480db,
  700: #206ec8,
  800: #153e96,
  900: #002d81,
  contrast: (
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $dark-primary-text,
    900: $light-primary-text,
  ),
);
$primary: mat.define-palette($revolut-primary-palette, 900, 500, 800);
$accent: mat.define-palette(mat.$orange-palette, 900);
$light-theme: mat.define-light-theme(
  (
    color: (
      primary: $primary,
      accent: $accent,
    ),
    typography:
      mat.define-typography-config(
        $font-family: "IRANSans",
      ),
  )
);
@include mat.radio-theme($light-theme);

可行解决方案 #

1. 全局主题文本变量覆盖（推荐） #

Angular Material的组件标签文本默认继承主题的text.primary/text.secondary变量，直接在主题配置中覆盖这些变量即可全局生效：

$light-theme: mat.define-light-theme(
  (
    color: (
      primary: $primary,
      accent: $accent,
      text: (
        primary: $light-primary-text, // 未选中状态标签颜色
        secondary: $dark-primary-text, // 可选：次要文本（如提示文字）颜色
      ),
    ),
    typography: mat.define-typography-config($font-family: "IRANSans"),
  )
);

如果需要单独设置选中状态的标签颜色，补充以下样式：

.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-label-content {
  color: $dark-primary-text;
}

2. 局部/全局样式覆盖 #

如果只需修改特定组件，在组件的styles.scss中使用::ng-deep（Angular 17兼容）：

::ng-deep .mat-radio-label-content {
  color: red; /* 未选中状态 */
}

::ng-deep .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-label-content {
  color: green; /* 选中状态 */
}

或者在全局styles.scss中直接添加样式（无需::ng-deep）：

.mat-radio-label-content {
  color: red;
}

.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-label-content {
  color: green;
}

3. CSS变量自定义（灵活可控） #

利用Angular Material支持的CSS变量，实现主题与样式的解耦：

1. 在主题文件中定义变量：

@include mat.all-component-themes($light-theme);

:root {
  --radio-label-unchecked: $light-primary-text;
  --radio-label-checked: $dark-primary-text;
}

2. 在组件样式中引用变量：

.mat-radio-label-content {
  color: var(--radio-label-unchecked);
}

.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-label-content {
  color: var(--radio-label-checked);
}

总结 #

• 全局统一修改选方案1，贴合Material主题体系，维护性最好；
• 局部特殊场景选方案2或方案3，方案3更适合动态切换颜色的场景；
• 不要直接修改Material核心样式，避免升级时出现兼容性问题。

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