Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    The reason is that the

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

    rule is preceding the latter.

    Just add an !important to the CSS rule, like so:

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

    and it should work.

    Login or Signup to reply.
  2. 0

    For Material 2 you can use color attribute and routerLinkActive directive:

    <a mat-button [color]="rla.isActive ? 'accent' : null" routerLink="/create" routerLinkActive #rla="routerLinkActive">
  New Post
</a>

    However, for Material 3 there are new guidelines for applying color:

    Theme color of the button. This API is supported in M2 themes only, it
    has no effect in M3 themes.

    For information on applying color variants in M3, see
    https://material.angular.io/guide/theming#using-component-color-variants.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search