Angular Material Button Color Not Applying with routerLinkActive

I'm using Angular Material for my application and have the following button setup

<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>



Issue:

When I navigate to the /create route, I expect the New Post button to have the accent color defined by mat-accent when active. However, the text color remains black instead of the expected pink from the indigo-pink theme.

I've confirmed that the theme is properly imported in angular.json:

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


In the above image you can see the

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


is overriden by

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


What I've Tried:

• Clearing the Angular cache.
• Inspecting CSS to check for specificity issues.
• Ensuring all dependencies are up to date.

Why is the mat-accent color not applying to the button when active?
How can I override the toolbar's styling to allow the accent color to show properly?

Any insights would be greatly appreciated!

Continue reading...