Убрать фокус на группе кнопок-матов в Angular Material

Question

У меня есть этот код с сайта Angular Material, и когда я использовал его в Chrome, я сосредоточился на кнопке (например, синяя рамка для каждой выбранной кнопки).

<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
  <mat-button-toggle value="bold">Bold</mat-button-toggle>
  <mat-button-toggle value="italic">Italic</mat-button-toggle>
  <mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>

Я пытался удалить его с помощьюнабросок: нет в Css, но он не работает.

Answer 1

Я думаю, что outlines уже должен быть удален угловым материалом. Если нет, то вы на правильном пути.

Вам необходимо добавить следующий CSS:

.mat-button-toggle-button:focus {
  outline: none;
}

Обязательно добавьте это в глобальный styles.css, а не в стили вашего компонента. Если это не сработает, попробуйте добавить !important только для того, чтобы увидеть, не перезаписаны ли ваши стили.

Примечание. Схемы обеспечивают визуальную обратную связь для ссылок, которые имеют focus при навигации по веб-документу с помощью клавиши TAB (или эквивалентной). Таким образом, они действительно важны для людей с нарушениями зрения. Если вы удалите их, всегда заменяйте их другими визуальными отзывами о состоянии фокуса. Угловой материал делает это путем изменения цвета фона.