Angular - 材質：進度條自定義顏色？

Question

我現在正在嘗試幾個小時。 我使用 Material2，只是想更改進度條的顏色。 我知道有這些主題（主要/重音/警告），但我想為我的進度條設置自定義顏色（綠色）。

我已經嘗試過最奇怪的 css 組合.. 但毫不費力。 也許有人有同樣的問題？

Answer 1

您可以使用::ng-deep選擇器來實現您想要的，這個答案有一些信息。

我是怎么做到的：

CSS

::ng-deep .mat-progress-bar-fill::after {
    background-color: #1E457C;
}

::ng-deep .mat-progress-bar-buffer {
    background: #E4E8EB;
}

::ng-deep .mat-progress-bar {
    border-radius: 2px;
}

HTML

<mat-progress-bar  mode="determinate" value="{{progress}}"></mat-progress-bar>

結果是這樣的：

編輯：

我找到了一種避免使用::ng-deep的方法，因為它將很快從 angular 中刪除。 似乎如果您將樣式從您的component.css文件移動到全局styles.css文件，它將在沒有::ng-deep情況下工作。

所以，上面定義的樣式可以改變

mat-progress-bar .mat-progress-bar-buffer {
  background: #E4E8EB;
}

將其移至styles.css ，它將像這樣應用：

稍后編輯

作為解釋為什么在全局樣式表中設置樣式有效：

對於組件，默認是 Angular 為組件的每個 DOM 元素添加一個屬性，然后為同一組件的 css 中的每個類添加相同的屬性。 將樣式添加到全局樣式表不會添加這些屬性，因此將應用樣式。 （為此感謝Jompis ）

這對我來說是一個新項目。 我沒有專門檢查舊代碼，但條件相同，沒有理由不工作。

Answer 2

因為到目前為止沒有人提到...

他就是我解決的方法。

@Meet Dave 對他的方法是正確的。 但是你應該使用encapsulation: ViewEncapsulation.None （禁用 css 模塊）

像這樣的東西：

零件

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None,
})

薩斯（在我的情況下）

.audio-progress-bar {
  &.mat-progress-bar {
    height: 10px;
  }

  .mat-progress-bar-fill::after {
    background-color: #37474f;
  }

  .mat-progress-bar-buffer {
    background-color: #90a4ae;
  }

  /* remove animation and the dots*/ 
  .mat-progress-bar-background {
    animation: none;
    background-color: #eceff1;
    fill: #eceff1;
  }
}

看法

<mat-progress-bar
  class="audio-progress-bar"
  mode="buffer"
></mat-progress-bar>

Answer 3

更新：

避免使用 deep, TL;DR : Deep 在技術上是無效的（比如 deeprecated :p）

有關更多信息，請參閱： Angular 2 中 /deep/ 和 >>> 的使用

現在，要更改墊子進度條的顏色，這就是我的工作方式，

轉到您的 styles.scss 文件（或項目中的主 css/scss 文件）

添加這個類 -->

.green-progress .mat-progress-bar-fill::after {
    background-color: green !important;
}

你的 mat-progress 應該使用上面的類，比如 -->

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

Answer 4

角8解決方案：

對我來說，它是將我的樣式放在頂級.scss文件中。 還必須在.scss中選擇如下：

html:

<mat-progress-bar [ngClass]="passwordStatusBarColor" 
                  aria-label="Password strength meter"
                  mode="determinate"
                  [value]="progress">
</mat-progress-bar>

<!--passwordStatusBarColor could be 'weak', 'weakest', etc. with a corresponding rule-->

樣式.scss：

.weakest {
  .mat-progress-bar-fill::after {
    background-color: yellow;
  }
}

Answer 5

我可以建議將其中一種預制的主要/警告/強調顏色更改為您的自定義顏色。

在您的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

Answer 6

對我來說，我只需要在 CSS 中加入這條規則：

div.mat-progress-bar-primary.mat-progress-bar-fill.mat-progress-bar-element::after{ background-color: green; }

但是，如果您使用主題，顯然會更容易。

Answer 7

您可以在 styles.scss 中添加自定義類並添加樣式（使用 !important）。

.your-custom-class{
  background-color: colorname !important;
}

或者您可以使用現有類通過將它們添加到全局 styles.scss 文件來覆蓋定義的 css 屬性。

.mat-progress-bar-fill::after{
  background-color: colorname;
}
.mat-progress-bar-buffer {
  background: colorname;
}

Answer 8

更改組件 typeDecorator 中的配置：

encapsulation: ViewEncapsulation.None

然后...

.mat-progress-bar-fill::after {
  background-color: $color;
}

Answer 9

Angular 7 和材料 7.1.1

 ::ng-deep .mat-progress-spinner circle, .mat-spinner circle{
        stroke: green !important; 
}

Answer 10

在不使用::ng-deep 、 ViewEncapsulation或主題的情況下，我們可以通過在 style.scss 中放置以下代碼來使用干凈的style.scss自定義進度條：

.mat-progress-bar {
    .mat-progress-bar-fill::after{
        background: #007bff;
    }
    .mat-progress-bar-buffer{
        background: white;
    }
}

.mat-progress-bar[mode=indeterminate] {
    .mat-progress-bar-fill::after{
        animation-duration: 1000ms !important;
    }
    animation-duration: 1000ms !important;
    .mat-progress-bar-primary{
        .mat-progress-bar-fill::after{
            animation-duration: 1000ms !important;
        }
        animation-duration: 1000ms !important;
    }
    .mat-progress-bar-secondary {
        .mat-progress-bar-fill::after{
            animation-duration: 1000ms !important;
        }
        animation-duration: 1000ms !important;
    }
}

在style.scss中使用上述樣式模式，我幾乎可以自定義進度條的任何方面。 我們可以根據我們使用的進度條類型來調整模式。

Answer 11

在您的 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;
}

即使您包含任何材質主題，上面的配置也會覆蓋它

Answer 12

您可以通過此方法僅覆蓋進度條背景顏色，添加自定義類，然后通過標簽和類的組合應用 css -

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

改成style.css

mat-progress-bar.my-color .mat-progress-bar-fill::after { background-color: green; }