使用自定义 Material Design 主题来控制标准组件颜色？答案

【问题标题】：Using a custom Material Design theme to control standard component colours?使用自定义 Material Design 主题来控制标准组件颜色？
【发布时间】：2019-06-04 08:09:11
【问题描述】：

我有一个使用 Angular Material 的 Angular 7 项目。我正在使用标准主题之一。我正在尝试控制进度条组件，使其能够根据其值将其设置为将颜色从红色变为绿色。

我能看到控制其颜色的唯一方法是传入primary / accent / warn 之一。

但是，我不想干扰我的主题。我想也许我可以通过创建一个自定义主题来解决这个问题，该主题扩展了我目前使用的主题，例如：

@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

$candy-app-warn:    mat-palette($mat-red);

$candy-app-green:  mat-palette($mat-green); // MY CUSTOM NAMED THEME ATTRIBUTE
$candy-app-red:    mat-palette($mat-red);  // MY CUSTOM NAMED THEME ATTRIBUTE

$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// that you are using.
@include angular-material-theme($candy-app-theme);

然后像这样控制我的组件：

<mat-progress-bar mode="determinate" value="40" color="green"></mat-progress-bar>

我很欣赏进度条似乎不支持任何其他颜色别名，因此不确定我是否可以使这种方法起作用>关于如何实现此结果的任何想法。即，我想更改进度条的颜色，而不会破坏依赖于现有主题的应用程序的其余部分。

【问题讨论】：

标签： angular sass angular-material2

【解决方案1】：

在主题文件中创建自定义主题类

  .red {
    $red-theme-primary: mat-palette($mat-red);
    $red-theme-accent:  mat-palette($mat-yellow, 400);
    $red-theme: mat-light-theme($red-theme-primary, $red-theme-accent);

    @include angular-material-theme($red-theme);
   }

  .green {
    $green-theme-primary: mat-palette($mat-green);
    $green-theme-accent:  mat-palette($mat-yellow, 400);
    $green-theme: mat-light-theme($green-theme-primary, $green-theme-accent);

    @include angular-material-theme($green-theme);
  }

用示例 div 包裹 mat 标签，并以 ngClass 作为动态参数添加主题类

  <div [ngClass]="progressColor">
   <!--wrap mat tag in div use class as defined in theme file -->
    <mat-progress-bar mode="determinate" value="progressValue" color="primary"></mat- 
    progress-bar>
  </div>

在ts文件中改变条件值

  export class ProgressComponent implements OnInit {
     progressColor = "red";
     progressValue = 0;
     constructor() { }

    ngOnInit() {
      this.progressValue = this.getProgress(51);
    }
    getProgress(value: number): number {

      if (value <= 50) {
       this.progressColor = "red";
      }
      else {
       this.progressColor = "green";
      }
   return value;
  }
 }

通过使用辅助主题来获得改变颜色提示的示例。

这是上一个答案中的一个示例，也带有次要主题。

How to change color of angular material stepper step icons

【讨论】：

【解决方案2】：

您可以有多个材料主题，例如：

    @import '~@angular/material/theming';
    @include mat-core();

    $candy-app-primary: mat-palette($mat-indigo);
    $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

    $candy-app-warn:    mat-palette($mat-red);

    $candy-app-green:  mat-palette($mat-green); // MY CUSTOM NAMED THEME ATTRIBUTE
    $candy-app-red:    mat-palette($mat-red);  // MY CUSTOM NAMED THEME ATTRIBUTE

    $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

    // that you are using.
    @include angular-material-theme($candy-app-theme);

    .my-second-theme {

     $second-theme-primary: mat-palette($mat-indigo);
     $second-theme-accent:  mat-palette($mat-pink, A200, A100, A400);

     $second-theme-warn:    mat-palette($mat-red);

     $second-theme: mat-light-theme($second-theme-primary, $second-theme-accent, $second-theme-warn);
     @include angular-material-theme($second-theme);
    }

因此，包含在 my-second-theme 类的元素中的所有内容都使用第二个主题的主要、重音和警告，而不会影响您的主应用。

但是，如果您只想自定义一种特定颜色，则必须覆盖组件中的 css 类，例如：

.mat-progress-spinner {
    color: green
}

要获得类名，您需要在浏览器中调试元素并进行一些尝试和错误。最好有多个具有不同颜色组合的主题，并在整个应用程序中使用它们。

【讨论】：