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

时间:2020-05-15 20:58:40

标签: css angular angular-material

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

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

它显示按钮的替代颜色,而不显示进度条。

enter image description here

控制台中没有错误。 我检查了元素,可以在<style></style>中看到来自node_modules/@angular/material/_theming.scss的按钮css,并从node_modules/@angular/material/_theming.scss中显示进度条。 / p>

角度9.1.4 角材料9.2.2

我错过了哪一步?有什么建议吗?

编辑:

我在inspect元素中看到了这一点,对于在<style>中渲染的按钮,对于进度条,如下图所示。

enter image description here

1 个答案:

答案 0 :(得分:1)

我使用了与您使用的相同的值测试了您的代码,并且该代码可以正常工作,然后,我将A400的颜色更改为#ff2929,所有工作正常

enter image description here

  • 角度版本:9.1.6
  • 角材料版本:9.2.3