使用自定义 Material 设计主题来控制标准组件颜色？

Question

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

我能看到控制颜色的唯一方法是传入 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

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

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

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

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

.mat-progress-spinner {
    color: green
}

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

Answer 2

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

  .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);
  }

使用示例包装 mat 标签 div 并添加主题 class 并将 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;
  }
 }

通过使用次要主题获得改变颜色提示的示例。

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

使用自定义 Material 设计主题来控制标准组件颜色？

Using a custom Material Design theme to control standard component colours?

sass

angular-material2

angular