For my application, I am implementing Angular Material and have configured the button as follows:
<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>
Concern:
Upon navigating to the /create route, the expected behavior is for the New Post button to display with the accent color specified by mat-accent when active. However, it continues to appear in black instead of the anticipated pink from the indigo-pink theme.
I have verified that the theme is correctly imported in angular.json:
"styles": [
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
]
The following code snippet highlights the issue:
.mat-mdc-button.mat-accent{
--mdc-text-button-label-text-color : #ff4081
}
is being overridden 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)
}
Steps taken so far:
- Clearing the Angular cache.
- Inspecting CSS for any specificity conflicts.
- Ensuring all dependencies are up to date.
Why is the mat-accent color not being applied to the button when active?
How can I adjust the toolbar's styling to allow the accent color to be displayed correctly?
Your insights on this matter would be greatly appreciated!