Angular Material按钮routerLinkActive时mat-accent颜色不生效问题

1. CSS特异性优先级冲突：工具栏下的按钮选择器 .mat-toolbar .mat-mdc-button-base.mat-unthemed 特异性高于 .mat-mdc-button.mat-accent，导致后者定义的--mdc-text-button-label-text-color变量被覆盖。
2. Angular Material工具栏默认行为：工具栏组件会自动为内部按钮添加mat-unthemed类，屏蔽主题样式继承，即使手动添加mat-accent类，也会被工具栏的默认文本颜色变量--mat-toolbar-container-text-color覆盖。

方案一：提升激活按钮样式的特异性 #

在全局样式文件（styles.scss）或组件样式文件中添加以下代码，确保激活状态的按钮样式优先级更高：

// 匹配工具栏下带mat-accent类的激活按钮
.mat-toolbar .mat-mdc-button.mat-accent.router-link-active {
  --mdc-text-button-label-text-color: var(--mat-accent-color);
}

若需固定使用indigo-pink主题的粉色，也可直接写具体色值：

.mat-toolbar .mat-mdc-button.mat-accent.router-link-active {
  --mdc-text-button-label-text-color: #ff4081;
}

方案二：使用Angular Material的color属性指定主题 #

修改按钮HTML代码，用color="accent"代替手动添加mat-accent类，让组件自动应用主题样式，避免被工具栏的unthemed样式干扰：

<a mat-button color="accent" routerLink="/create" routerLinkActive="router-link-active">
  New Post
</a>

此时routerLinkActive仅需标记激活状态，Angular Material会自动处理主题颜色的应用。

方案三：取消工具栏按钮的unthemed样式限制 #

若希望工具栏内的按钮都能正常继承主题样式，可全局覆盖工具栏下unthemed按钮的颜色变量：

.mat-toolbar .mat-mdc-button-base.mat-unthemed {
  --mdc-text-button-label-text-color: inherit;
}

这样当按钮添加mat-accent类时，就能正常应用对应的主题颜色。

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