css - 删除焦点边框 - mat-list

Question

我无法解决 mat-list-item 中的边框问题，我确实在材料的网站上寻找了解决方案，但没有找到。

当我点击这个蓝色边框的图标时，我没有找到使这种情况发生的 css 类，有没有人经历过类似的事情？

我的代码：

 <mat-list>
     <mat-list-item class="item-list" routerLink="/panel/home" [routerLinkActive]="['active-item']">
        <mat-icon matListIcon>home</mat-icon>
     </mat-list-item>
     <mat-list-item class="item-list" routerLink="/profile" [routerLinkActive]="['active-item']">
        <mat-icon matListIcon>class</mat-icon>
     </mat-list-item>
     <mat-list-item class="item-list" routerLink="/student" [routerLinkActive]="['active-item']">
        <mat-icon matListIcon>assignment</mat-icon>
     </mat-list-item>
     <mat-list-item class="item-list">
        <mat-icon matListIcon>directions_run</mat-icon>
     </mat-list-item>
  </mat-list>

'active-item' 类，使紫色边框向右，但不是蓝色边框。

.active-item{
  border-right: 2px solid $primary-color;
  mat-icon {
    color: $primary-color 
  }
}

我将 Angular 与 Material UI 一起使用。

Answer 1

尝试 ：

mat-icon,mat-icon.matListIcon{
    outline:none !important;

}

Answer 2

如果是按钮，请将其插入到styles.css 中：

button:focus, 
button:active:focus, 
button.active:focus {
    outline: none !important;
    outline-style: none !important;
}