如何禁用Angular Material侧边栏mat-list-item的灰色激活背景效果

问题场景：使用mat-sidenav搭配mat-nav-list和mat-list-item实现导航，通过URL直接导航时自定义激活样式（带透明度的白色背景）正常，但点击列表项激活时，会先显示默认灰色背景，点击页面其他区域后才切换为自定义样式。

原因分析 #

mat-list-item自带默认的**焦点状态（:focus）和激活状态（:active）**样式，点击元素时会触发这些默认样式，而routerLinkActive的样式要等路由跳转完成后才会完全生效，导致短暂的样式冲突。

解决方案 #

方法1：覆盖默认的焦点/激活样式

在CSS中添加以下代码，直接覆盖mat-list-item的默认选中/聚焦样式，让其与自定义激活样式保持一致：

/* 覆盖mat-list-item的默认焦点、激活状态样式 */
mat-list-item:focus,
mat-list-item:active,
mat-list-item.mat-list-item-focus,
mat-list-item.mat-list-item-active {
  background-color: rgba(255, 255, 255, 0.4) !important;
  outline: none; /* 移除默认焦点轮廓 */
  border-radius: 40px;
}

/* 未激活状态下的点击样式，与hover保持统一 */
mat-list-item:not(.is-active):focus,
mat-list-item:not(.is-active):active {
  background-color: #f2f2f2 !important;
}

方法2：调整routerLinkActive的应用目标

把routerLink和routerLinkActive移到内部的<a mat-line>标签上，避免mat-list-item直接关联路由激活状态引发样式冲突：

<mat-nav-list>
  <mat-list-item *ngIf="auth.isAuthenticated$ | async">
    <mat-icon>content_paste</mat-icon>
    <a mat-line routerLink="/link" routerLinkActive="is-active">Test</a>
  </mat-list-item>
</mat-nav-list>

同时调整CSS，将激活样式应用到<a>标签：

a.is-active {
  display: flex;
  align-items: center;
  border-radius: 40px;
  background-color: rgba(255, 255, 255, 0.4);
}

mat-list-item:hover {
  background-color: #f2f2f2;
  border-radius: 40px;
}

方法3：禁用涟漪效果（可选）

如果灰色背景是由Material的涟漪动画导致的，可直接禁用该效果：

<mat-list-item *ngIf="auth.isAuthenticated$ | async" routerLink="/link" routerLinkActive="is-active" [disableRipple]="true">
  <mat-icon>content_paste</mat-icon>
  <a mat-line>Test</a>
</mat-list-item>

推荐方案 #

优先选择方法1，既能保留mat-list-item与路由的关联逻辑，又能统一激活和点击状态的样式，避免用户感知到样式跳转。

内容的提问来源于stack exchange，提问作者Christian