Search code examples
angularsassangular-materialmaterial3angular-theming

mat.button-color not working for mat-raised button

I have created a custom-theme, and using it in my styles.scss like this:

.alternate-theme-green {
  @include mat.button-color(m3-green-theme.$light-theme, $color-variant: primary);    
}

this is working fine for mat-flat-button, but when applying same class on mat-raised-button its not working.

Please help.

Solution

  • Since you want to transform one button to another, you have to use CSS with variables to define the overrides for this specific type of button.

    .alternate-theme-green {
  @include mat.button-color($theme, $color-variant: primary);
}
.alternate-theme-green[mat-raised-button]:not(:disabled) {
  color: var(--mdc-filled-button-label-text-color) !important;
  background-color: var(--mdc-filled-button-container-color) !important;
}

    Stackblitz Demo