Как отключить серый эффект «вытирания» при нажатии на mat-menu-item

Question

У меня есть список mat-nav с пунктами mat-menu внутри.Я установил класс routerLinkActive в своем scss, чтобы изменить фон и цвет текста элемента mat-menu при нажатии на элемент.Однако при щелчке по одному из элементов он меняет свой фон на светло-серый, и мой цвет фона отображается только после того, как вы щелкнете в другом месте приложения.

Поведение видно в следующем GIF-файле.

Я бы хотел, чтобы цвет фона элемента меню mat изменился на выбранный мной выбранный цвет без поведения по умолчанию «серая очистка»,возможно ли это?

Мой код указан ниже, если требуется:

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

Я бы посоветовал не использовать !important везде, где это возможно.С инкапсулированным фреймворком, таким как Angular, почти никогда не требуется переопределять опции CSS.Кроме того, благодаря переопределению стилей эффекта чернил, пульсация и поведение все еще присутствуют, просто невидимы - это все еще полудорожая анимация, с затратами ресурсов и времени.

Вместо этого MatList, MatOption и MatNavList API имеет встроенную опцию 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.

Answer 2

Просто поставьте! Важный после вашего цвета фона CSS, чтобы переопределить цвет фона мата.

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