Angular Material模态框打开时mat-button始终有灰色背景如何去除？

这个问题是因为模态框打开后，Go Back按钮自动获得了焦点，Angular Material的mat-button在聚焦状态下会显示灰色背景，点击外部区域后按钮失去焦点，背景也就消失了。可以通过以下几种方式解决：

方法一：修改模态框的自动聚焦行为 #

打开模态框时，禁止自动聚焦到按钮，或者指定其他元素作为聚焦目标。在调用open()方法时配置autoFocus选项：

// 组件中打开模态框的代码
this.dialog.open(YourModalComponent, {
  autoFocus: false, // 关闭自动聚焦
  // 也可以指定其他元素聚焦，比如模态框内的某个容器元素
  // autoFocus: '.modal-container'
});

方法二：让按钮主动失去焦点 #

通过ViewChild获取按钮实例，在模态框初始化完成后让按钮失去焦点：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-your-modal',
  templateUrl: './your-modal.component.html'
})
export class YourModalComponent implements AfterViewInit {
  @ViewChild('goBackBtn') goBackBtn!: ElementRef<HTMLButtonElement>;

  constructor(private dialogRef: MatDialogRef<YourModalComponent>) {}

  ngAfterViewInit(): void {
    // 延迟执行确保按钮已渲染完成
    setTimeout(() => {
      this.goBackBtn.nativeElement.blur();
    }, 0);
  }
}

对应的模板中给按钮添加模板引用：

<button #goBackBtn mat-button>Go Back</button>

方法三：自定义CSS覆盖聚焦样式 #

在组件的样式文件中，使用::ng-deep覆盖按钮聚焦时的背景样式：

::ng-deep .mat-button:focus:not(.mat-button-disabled) {
  background-color: transparent !important;
  /* 可按需调整聚焦时的轮廓样式 */
  outline: none;
}

如果不想使用::ng-deep，可以关闭组件的样式封装：

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

@Component({
  selector: 'app-your-modal',
  templateUrl: './your-modal.component.html',
  styleUrls: ['./your-modal.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourModalComponent {}

然后在样式文件中直接编写：

.mat-button:focus:not(.mat-button-disabled) {
  background-color: transparent;
  outline: none;
}

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