css - Angular Material 按钮移除自动对焦

Question

我有以下按钮

<td mat-cell *matCellDef="let element">
  <button mat-icon-button type="button" (click)="downloadStuff(element)">
    <mat-icon mat-icon matTooltip="{{element.someId}}">picture_as_pdf</mat-icon>
  </button>
</td>

一切都很好，但我注意到这个小虫子默认情况下会被勾勒出来：

好的.... CSS 让我可以通过以下方式删除恼人的轮廓：

button:focus {
    outline: none;
}

但是然后..我仍然得到这个烦人的默认背景焦点：

我在 CSS 中尝试了一些覆盖和背景相关的东西，但似乎都没有解决这个问题。如何删除此默认背景？为什么默认情况下会这样？？？

查看开发工具中的选定项目。

标签： cssbuttonangular-materialdefault

Answer 1

就我而言，真正的问题是按钮结构。Angular Material 构建了各种子组件，最后一个是带有 css 类的“div” mat-button-focus-overlay：

我的解决方案很简单。在style.css添加或覆盖mat-button-focus-overlay：

.mat-button-focus-overlay {
    background-color: transparent!important;
}