Angular - 材质：进度条自定义颜色？

Question

我现在正在尝试几个小时。我使用 Material2，只是想更改进度条的颜色。我知道有这些主题（主要/重音/警告），但我想为我的进度条设置自定义颜色（绿色）。

我已经尝试过最奇怪的 css 组合.. 但毫不费力。也许有人有同样的问题？

原文由 Mka24 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我可以建议将其中一种预制的主要/警告/强调颜色更改为您的自定义颜色。

在您的 styles.scss （如果您的样式文件是 css，则必须将其更改为支持 scss）：

   @import '~@angular/material/theming';
  // Plus imports for other components in your app.

  // Include the common styles for Angular Material. We include this here so that you only
  // have to load a single css file for Angular Material in your app.
  // Be sure that you only ever include this mixin once!
  @include mat-core();

  // Define the palettes for your theme using the Material Design palettes available in palette.scss
  // (imported above). For each palette, you can optionally specify a default, lighter, and darker
  // hue.

  $mat-blue: (
    50: #e3f2fd,
    100: #bbdefb,
    200: #90caf9,
    300: #64b5f6,
    400: #42a5f5,
    500: #2196f3,
    600: #1e88e5,
    700: #1976d2,
    800: #1565c0,
    900: #0d47a1,
    A100: #82b1ff,
    A200: #448aff,
    A400: #2979ff,
    A700: #2B66C3,
    contrast: (
      50: $black-87-opacity,
      100: $black-87-opacity,
      200: $black-87-opacity,
      300: $black-87-opacity,
      400: $black-87-opacity,
      500: white,
      600: white,
      700: white,
      800: $white-87-opacity,
      900: $white-87-opacity,
      A100: $black-87-opacity,
      A200: white,
      A400: white,
      A700: white,
    )
  );

  $candy-app-primary: mat-palette($mat-blue, A700);
  $candy-app-accent:  mat-palette($mat-orange, A200, A100, A400);

  // The warn palette is optional (defaults to red).
  $candy-app-warn:    mat-palette($mat-red);

  // Create the theme object (a Sass map containing all of the palettes).
  $candy-a-theme($candy-app-theme);
pp-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

  // Include theme styles for core and each component used in your app.
  // Alternatively, you can import and @include the theme mixins for each component
  // that you are using.
  @include angular-material

原文由 TheUnreal 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在您的 html 中：

 <mat-progress-bar class="my-progress-bar" mode="indeterminate"></mat-progress-bar>

在您的全局样式中（在样式属性下的 .angular-cli.json 中提到的那个：

 //This one is the moving color
.my-progress-bar .mat-progress-bar-fill::after {
  background-color: #e91b22;
}

// This will become the background color of your bar
.my-progress-bar .mat-progress-bar-buffer {
  background: white;
}

即使您包含任何材质主题，上面的配置也会覆盖它

原文由 Prateek Bhuwania 发布，翻译遵循 CC BY-SA 4.0 许可协议