我在解决垫子列表项中的边框时遇到了问题,我确实在材料的网站上寻找了解决方案,但找不到。
当我单击图标时,会出现这个蓝色边框,但我找不到使这种情况发生的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一起使用。
答案 0 :(得分:1)
尝试:
mat-icon,mat-icon.matListIcon{
outline:none !important;
}
答案 1 :(得分:0)
如果是Button,请将其插入 styles.css :
button:focus,
button:active:focus,
button.active:focus {
outline: none !important;
outline-style: none !important;
}