Angular中如何禁用或覆盖cdk-focused类修复按钮切换样式问题

遇到这种焦点类干扰选中样式的情况很常见，我给你几个可行的解决方案，按推荐程度排序：

1. 增强CSS选择器优先级（最推荐） #

不需要修改任何逻辑，只需要调整你的CSS选择器，让选中状态的样式在同时存在焦点类时依然生效。因为点击按钮后，mat-button-toggle-checked和cdk-focused/cdk-program-focused是同时存在的，所以我们可以把这些组合状态写进选择器里，提升优先级：

/* 如果是全局样式文件，直接写 */
.mat-button-toggle-checked,
.mat-button-toggle-checked.cdk-focused,
.mat-button-toggle-checked.cdk-program-focused {
  background-color: #你的选中背景色;
  color: #你的文字颜色;
  border-color: #你的边框颜色;
  /* 其他你需要的选中样式 */
}

/* 如果是组件内的样式，需要穿透Angular的视图封装，用::ng-deep */
:host ::ng-deep .mat-button-toggle-checked,
:host ::ng-deep .mat-button-toggle-checked.cdk-focused,
:host ::ng-deep .mat-button-toggle-checked.cdk-program-focused {
  /* 同上的样式 */
}

这种方法最优雅，不会影响组件行为，也符合CSS的层级规则。尽量避免用!important，除非万不得已——毕竟它会让后续样式调试变得麻烦。

2. 通过组件逻辑移除焦点类 #

如果CSS优先级的方法不生效（比如某些Material内置样式优先级极高），可以在组件里监听点击事件，手动移除焦点类。注意要加个setTimeout，因为Angular的变更检测会在点击后自动给按钮加上焦点类，延迟一下移除才能确保生效：

import { Component, ElementRef, HostListener } from '@angular/core';

@Component({
  selector: '你的组件选择器',
  templateUrl: './你的组件模板.html',
  styleUrls: ['./你的组件样式.css']
})
export class YourComponent {
  constructor(private el: ElementRef) {}

  @HostListener('click', ['$event.target'])
  handleToggleClick(target: HTMLElement) {
    // 找到被点击的mat-button-toggle元素
    const toggleButton = target.closest('.mat-button-toggle');
    if (toggleButton) {
      // 延迟移除焦点类，避开Angular的变更检测周期
      setTimeout(() => {
        toggleButton.classList.remove('cdk-focused', 'cdk-program-focused');
      }, 0);
    }
  }
}

3. 禁用按钮的焦点（不推荐，影响 accessibility） #

如果你不需要按钮获得焦点（不考虑键盘导航等无障碍需求），可以给mat-button-toggle加上tabindex="-1"，这样按钮就不会获得焦点，自然也不会触发焦点类：

<mat-button-toggle-group>
  <mat-button-toggle value="option1" tabindex="-1">选项1</mat-button-toggle>
  <mat-button-toggle value="option2" tabindex="-1">选项2</mat-button-toggle>
</mat-button-toggle-group>

⚠️ 注意：这种方法会破坏无障碍体验，键盘用户无法通过Tab键选中按钮，所以除非特殊场景，不建议使用。

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