[Fixed] Angular material : do NOT change color when disabled (add opacity only)

Issue

I’m currently trying to redefine the style of my angular material buttons.

No problem to add new css attributes or change existing ones, but when I’m trying to avoid color & background changes when the button is disabled and add a simple opacity: 0.5;, I don’t know where to start…

Saw lots of articles about color theming, but none about getting rid of some attributes.

Thanks !

Q.

Solution

Found a solution.
By redefining the mixin mat-button-theme-property, I was able to set the opacity and remove undesired CSS attributes.

@mixin _mat-button-theme-property($theme, $property, $hue) {
      $primary: map-get($theme, primary);
      $accent: map-get($theme, accent);
      $warn: map-get($theme, warn);
      $background: map-get($theme, background);
      $foreground: map-get($theme, foreground);
    
      &.mat-primary {
        #{$property}: mat-color($primary, $hue);
      }
      &.mat-accent {
        #{$property}: mat-color($accent, $hue);
      }
      &.mat-warn {
        #{$property}: mat-color($warn, $hue);
      }
    
      &.mat-primary, &.mat-accent, &.mat-warn, &.mat-button-disabled {
        &.mat-button-disabled {
          // Those lines change the color & background color of the button when disabled
          // $palette: if($property == 'color', $foreground, $background);
          // #{$property}: mat-color($palette, disabled-button);
          opacity: 0.5;
        }
      }
    }

`