Question

我有一个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>

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

Answer 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

Answer 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
}

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

使用自定义的“材料设计”主题来控制标准组件的颜色？

2 个答案: