如何在单击mat菜单项时禁用灰色“擦除”效果

放好!重要信息:在背景色css后覆盖mat的背景色。

.active {
    border-left: 5px solid mat-color($accent);
    background-color: mat-color($primary) !important;
    color: $light-primary-text !important;
}

我建议不要使用 !important 只要可能。对于像Angular这样的视图封装框架,几乎不需要覆盖CSS选项。此外,覆盖墨迹效果的样式后,涟漪和行为仍然存在,只是看不见——这仍然是一个半昂贵的动画,需要花费资源和时间来完成。

相反 MatList , MatOption 和 MatNavList disableRipple 以消除油墨的影响。

<mat-sidenav #sidenav mode="side" [opened]="(sideNavOpened)" class="sidenav-inner-content">
    <mat-nav-list [disableRipple]="true">
        <a mat-list-item routerLink="/customers/search" routerLinkActive="active"><mat-icon>search</mat-icon> Search Customer</a>
        <a mat-list-item routerLink="/customers/create" routerLinkActive="active"><mat-icon>add</mat-icon> Create Customer</a>
    </mat-nav-list>
</mat-sidenav>

你也可以使用 disableRipple 有选择地 mat-list-item .

阴影是由“垫列表项波纹”和“垫波纹”引起的。我知道两种解决方案:

1) 将以下内容添加到styles.css中:

.mat-nav-list .mat-list-item .mat-list-item-ripple {
  visibility: hidden !important;
}

2) 或将以下内容添加到相关页面的.css中:

::ng-deep .mat-nav-list .mat-list-item .mat-list-item-ripple {
  visibility: hidden !important;
}