Angular 材料進度條未從主題加載原色

Question

我正在嘗試覆蓋 angular 材料的原色。 我有一個進度條和按鈕。

on.html

<button mat-flat-button color="primary">Continue</button>
<mat-progress-bar color="primary" mode="determinate" value="100" bufferValue="0"></mat-progress-bar>

在 main.scss 上

@import "~@angular/material/theming";
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@include mat-core();

$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,
    )
);
$app-primary: mat-palette($mat-blue, A400, A100, A800);
$app-accent: mat-palette($mat-pink, A200, A100, A400);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
@include angular-material-theme($app-theme);

它顯示按鈕的覆蓋顏色，而不是進度條。

控制台中沒有錯誤。 我檢查了元素，我可以看到來自 node_modules/@angular/material/_theming.scss 的按鈕 css 被放置在<style></style>中，進度條顯示在 node_modules/@angular/material/_theming.scss .

Angular 9.1.4 Angular 材料9.2.2

我錯過了什么步驟？ 有什么建議嗎？

編輯：

我在 inspect 元素中看到了這一點，因為它在<style>中呈現的按鈕，因為進度條呈現如下圖所示。

Answer 1

我使用與您使用的相同的值測試了您的代碼並且它有效，之后，我將 A400 的顏色更改為 #ff2929 並且一切正常

• Angular 版本：9.1.6
• Angular 素材版本：9.2.3

Answer 2

嘗試將其放入 main.scss

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