Angular Material 15升16后，.mat-button-toggle-checked样式失效问题

云上老周

2026-6-28

Angular Material 16升级后.mat-button-toggle-checked样式被CSS变量覆盖的解决方案

问题原因

Angular Material 16对按钮切换组件的样式系统做了重构，改用CSS变量管理主题状态色（比如--mat-standard-button-toggle-selected-state-text-color）。这些变量要么通过内联样式直接绑定到元素，要么通过比单一.mat-button-toggle-checked类优先级更高的选择器注入，导致你原来的自定义样式被覆盖。

组件模板SCSS的视图封装不会让你的样式优先级自动变高——Material的组件样式是通过主题系统全局注入的，优先级本身就高于组件内的普通类选择器。

推荐解决方案

1. 自定义主题变量（最优方案）

遵循Angular Material的主题定制规范，直接在主题文件中修改按钮切换组件的选中状态文本颜色，从根源上覆盖默认变量：

@use '@angular/material' as mat;

// 假设你已有基础主题$theme
$custom-button-toggle-config: mat.button-toggle-theme-config(
  $selected-state-text-color: $white
);

$custom-theme: mat.define-light-theme((
  color: (
    primary: $your-primary-color,
    // 其他主题配置...
  ),
  components: (
    button-toggle: $custom-button-toggle-config
  )
));

// 注入主题样式
@include mat.all-component-themes($custom-theme);

2. 提升选择器优先级

如果不想修改全局主题，可以在组件SCSS中使用更具体的选择器，优先级超过Material的默认样式：

// 结合组件宿主选择器+目标类
:host .mat-button-toggle-checked {
  color: $white;
}

// 或者结合父容器类+目标类（如果有）
.mat-button-toggle-group .mat-button-toggle-checked {
  color: $white;
}