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

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

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

角度9.1.4 角材料9.2.2

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

编辑：

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

Answer 1

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

角度版本：9.1.6
角材料版本：9.2.3

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

1 个答案: