Кнопка угловой материал удалить автофокус

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, и ни одна из них, похоже, не решала проблему.Как мне удалить этот фон по умолчанию?И почему он так себя ведет по умолчанию?

См. Выбранный элемент в инструментах разработчика.

Answer 1

Также попробуйте это.

<button mat-icon-button [autofocus]="false" (click)="closeDialog()"> <mat-icon>clear</mat-icon> </button>

Просто добавьте [autofocus].

Answer 2

Мне удалось избавиться от фокусированной кнопки по умолчанию, установив атрибут cdk-focus-start для другого элемента.Более подробная информация доступна здесь

Answer 3

В моем случае настоящей проблемой была структура кнопок.Angular Material создает различные подкомпоненты, и последний - это div с классом css mat-button-focus-overlay:

Мое решение простое.В style.css добавьте или перезапишите mat-button-focus-overlay:

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