Angular material : 禁用时不改变颜色（仅添加不透明度）

Question

我目前正在尝试重新定义 angular material 按钮的样式。

添加新的 css 属性或更改现有属性没问题，但是当我试图避免 color 和 background 在按钮为 disabled 时发生变化并添加一个简单的opacity: 0.5;，我不知道从哪里开始...

看到很多关于颜色主题的文章，但是none关于摆脱一些属性的文章。

谢谢！

Q.

Answer 1

将这些行添加到您的 styles.scss 文件中：

.mat-flat-button.mat-primary.mat-button-disabled,
.mat-flat-button.mat-accent.mat-button-disabled,
.mat-flat-button.mat-warn.mat-button-disabled,
.mat-flat-button.mat-button-disabled.mat-button-disabled,
.mat-raised-button.mat-primary.mat-button-disabled,
.mat-raised-button.mat-accent.mat-button-disabled,
.mat-raised-button.mat-warn.mat-button-disabled,
.mat-raised-button.mat-button-disabled.mat-button-disabled,
.mat-fab.mat-primary.mat-button-disabled,
.mat-fab.mat-accent.mat-button-disabled,
.mat-fab.mat-warn.mat-button-disabled,
.mat-fab.mat-button-disabled.mat-button-disabled,
.mat-mini-fab.mat-primary.mat-button-disabled,
.mat-mini-fab.mat-accent.mat-button-disabled,
.mat-mini-fab.mat-warn.mat-button-disabled,
.mat-mini-fab.mat-button-disabled.mat-button-disabled {
    background-color: your-background-color !important;
    color: your-font-color !important;
    opacity: your-desired-opacity !important;
}

Answer 2

找到解决办法。通过重新定义 mixin mat-button-theme-property，我能够设置不透明度并删除不需要的 CSS 属性。

@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;
        }
      }
    }

`

Angular material : 禁用时不改变颜色（仅添加不透明度）

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

angular-material

angular

scss-mixins