角度材质进度条未从主题加载原色

Question

我正在尝试覆盖角材料的原色。 我有一个进度条和按钮。

在.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 角材料 9.2.2

我错过了什么步骤？有什么建议吗？

编辑：

我在检查元素中看到了这一点，它在<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; }