Почему стили Angular Material по умолчанию загружаются таким образом, что переопределяют пользовательские темы?

Я пытаюсь изучить Angular Material, но считаю документацию неточной или неполной. Судя по документации для версии 17, моя основная панель инструментов должна иметь желтый фон:

стили.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 считает необходимым добавить эти стили для начала?

🤔 А знаете ли вы, что...
Фреймворк Angular CLI (Command Line Interface) упрощает создание, развертывание и управление проектами Angular.