routerLinkActive样式被Angular Material覆盖，如何自定义激活样式？

问题原因 #

Angular Material的.mat-mdc-unelevated-button:not(:disabled)选择器优先级高于你自定义的.mobile-nav__icon--active，导致你的样式无法生效；旧项目能正常工作是因为旧版本Material的样式优先级规则不同。

解决方案 #

• 提升选择器优先级（推荐）
  利用按钮本身的类和active类组合，或者直接指定子元素样式，让自定义样式优先级超过Material的样式：

  // 方案1：组合按钮类与active类
  .mobile-nav__btn.mobile-nav__icon--active {
    color: red;
  }
  
  // 方案2：直接针对内部图标和文字设置样式
  .mobile-nav__icon--active mat-icon,
  .mobile-nav__icon--active .mobile-nav__span {
    color: red;
  }
  

• 强制生效（应急用）
  使用!important强制覆盖Material的样式（不推荐长期使用，可能引发样式冲突）：

  .mobile-nav__icon--active {
    color: red !important;
  }
  

• 绑定active类到内部元素
  通过模板变量获取routerLinkActive的状态，直接把active类加到图标和span上，避开按钮本身的Material样式：

  <button mat-flat-button class="mobile-nav__btn" routerLink="/explore" #rla="routerLinkActive">
      <mat-icon [class.mobile-nav__icon--active]="rla.isActive" style="margin: 0 auto 4px auto;" svgIcon="search-icon"></mat-icon>
      <span [class.mobile-nav__icon--active]="rla.isActive" class="mobile-nav__span" translate="navbar.bottom.explore.label"></span>
  </button>
  

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