Html – 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!