css - 单击 mat-menu-item 时如何禁用灰色 "wipe"效果

Question

我有一个 mat-nav-list，其中包含 mat-menu-items。我在我的 scss 中设置了一个 routerLinkActive 类，以在单击某个元素时更改 mat-menu-item 文本的背景和颜色。但是，当单击其中一项时，会将其背景更改为浅灰色，并且只有在单击应用程序中的其他位置后才会显示我的背景颜色。

该行为在下面的 gif 中可见。

我希望将 mat-menu-item 背景颜色更改为我选择的颜色，而不使用默认的“灰色删除”行为，这可能吗？

如果需要，我的代码如下:

app.html

<mat-sidenav #sidenav mode="side" [opened]="(sideNavOpened)" class="sidenav-inner-content">
    <mat-nav-list>
        <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>

app.scss

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

Answer 1

只需在背景颜色 css 之后添加 !important 即可覆盖 mat 的背景颜色。

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