如何取消Angular Material单选组中首个单选按钮的默认高亮状态

我太懂这种小细节闹心的感觉了！这种默认高亮其实是页面加载时，浏览器会自动把焦点给到页面上第一个可交互的表单元素，而Angular Material的单选按钮在焦点状态下会显示出类似hover的样式，就造成了你看到的“自动高亮”效果。下面给你两个实用的解决办法：

方法一：通过代码主动移除焦点 #

这个方法从根源上解决问题，让第一个单选按钮不会保持焦点状态。

首先在你的组件类里导入需要的依赖：

import { ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { MatRadioButton } from '@angular/material/radio';

然后在组件类中添加以下代码：

// 获取页面上所有的单选按钮实例
@ViewChildren(MatRadioButton) radioButtons!: QueryList<MatRadioButton>;

ngAfterViewInit(): void {
  // 延迟执行确保DOM完全渲染完成
  setTimeout(() => {
    // 如果存在第一个单选按钮，让它失去焦点
    if (this.radioButtons.first) {
      this.radioButtons.first._elementRef.nativeElement.blur();
    }
  }, 0);
}

这样页面加载完成后，第一个单选按钮会自动失去焦点，那个烦人的高亮就消失啦。

方法二：用CSS覆盖焦点样式 #

如果你不想修改组件逻辑，也可以通过CSS来隐藏焦点状态的高亮效果，让它和正常状态看起来一致。在你的组件样式文件（比如xxx.component.scss）中添加以下代码：

/* 覆盖未选中单选按钮的焦点边框样式 */
.mat-radio-button:not(.mat-radio-checked).mat-radio-focused .mat-radio-outer-circle {
  border-color: rgba(0, 0, 0, 0.54); /* 和默认未选中状态的边框颜色一致 */
}

/* 覆盖未选中单选按钮的焦点内部圆圈样式 */
.mat-radio-button:not(.mat-radio-checked).mat-radio-focused .mat-radio-inner-circle {
  background-color: transparent; /* 恢复未选中状态的透明样式 */
}

这样即使第一个按钮获得了焦点，视觉上也和普通状态没区别，用户就不会注意到这个高亮了。

备注：内容来源于stack exchange，提问作者OptimusPrime98