角度材质按钮颜色不适用于 routerLinkActive

Question

我在我的应用程序中使用 Angular Material，并具有以下按钮设置

<mat-toolbar>
  <span>
    <a routerLink="/">My Messages</a>
  </span>
  <ul>
    <li>
      <a mat-button routerLink="/create" routerLinkActive="mat-accent">
        New Post
      </a>
    </li>
  </ul>
</mat-toolbar>

问题：

当我导航到 /create 路线时，我希望“新帖子”按钮在活动时具有由 mat-accent 定义的强调色。但是，文本颜色仍然是黑色，而不是靛蓝粉红色主题中预期的粉红色。

我已经确认主题已正确导入到 angular.json 中：

"styles": [
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.scss"
]

在上图中你可以看到

.mat-mdc-button.mat-accent{ 
    --mdc-text-button-label-text-color : #ff4081
}

被

覆盖

.mat-toolbar .mat-mdc-button-base.mat-mdc-button-base.mat-unthemed{
   --mdc-text-button-label-text-color : var(--mat-toolbar-container-text-color)
}

我尝试过的：

• 清除 Angular 缓存。
• 检查 CSS 以检查特异性问题。
• 确保所有依赖项都是最新的。

为什么按钮激活时，哑光强调色没有应用到按钮上？
如何覆盖工具栏的样式以允许强调色正确显示？

任何见解将不胜感激！

Answer 1

原因是

.mat-mdc-button.mat-accent{ 
    --mdc-text-button-label-text-color : #ff4081
}

规则先于后者。

只需在 CSS 规则中添加

!important

，如下所示：

.mat-mdc-button.mat-accent{ 
    --mdc-text-button-label-text-color : #ff4081 !important;
}

它应该可以工作。