angular 5 在移动设备上禁用 cdk 焦点状态

Question

移动设备上有一个错误(我猜)，当您单击侧边导航菜单然后选择要前往的路线时，它会关闭侧边导航但将菜单按钮保持在焦点状态。也发生在打开模态的按钮上，或者实际上任何具有焦点状态的东西(侧导航、导航项目、按钮等)。

您可以在 Angular Material 侧导航示例(模拟移动设备)中看到它发生的情况:
https://stackblitz.com/angular/brrokxxmqvrn?file=app%2Fsidenav-autosize-example.ts

或者你可以看下面的截图(点击后切换sidenav按钮是焦点)


我想知道如何在 angular 5 上禁用移动设备上(或在某些条件下)的 cdk 焦点状态

Answer 1

我最终为消除效果所做的是使用以下 css:

.mat-button,
.mat-icon-button {
  &.cdk-focused,
  &.cdk-program-focused {
    background-color: none !important;

    .mat-button-focus-overlay {
      display: none !important;
    }
  }
}