为什么 Angular Material 默认样式会以覆盖自定义主题的方式加载？

Question

我正在尝试学习 Angular Material，但我发现文档不准确或不完整。根据版本 17 的文档，我的主工具栏应该有黄色背景：

styles.scss：

@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$yellow-palette);
$my-accent: mat.define-palette(mat.$indigo-palette);
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  ),
  typography: mat.define-typography-config(),
  density: 0
));

@include mat.all-component-themes($my-theme);

角度.json：

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            ...
            "styles": [
              "src/styles.scss"
            ]
            ...
          }

相反，我的工具栏背景是浅灰色的。这是因为我的主题文件加载后出现了一些块。

这些样式块到底来自哪里？为什么它们被添加在应用程序定义的样式之后？他们是否希望您使用更具体的 CSS 选择器来覆盖它们？我正在我的 scss 中导入核心主题规则，那么为什么 Angular Material 17 会觉得需要首先添加这些样式呢？

Answer 1

因为你需要添加

color="primary"

https://v17.material.angular.io/components/toolbar/api