Search code examples
angularsassangular-material2

Why are Angular Material default styles loaded in such a way as to override custom themes?

I am trying to learn Angular Material, but I'm finding the documentation inaccurate or incomplete. Based on the documentation for version 17, my main toolbar should have a yellow background:

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

angular.json:

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

Instead, my toolbar's background is light grey. This is because of some blocks that appear after my theme file is loaded.

enter image description here

Where the heck are these style blocks coming from and why are they being added after the styles defined by the application? Do they expect you to override them using a more specific CSS selector? I'm importing the core theme rules in my scss, so why would Angular Material 17 feel the need to add these styles to begin with?

Solution

  • Because you need to add color="primary" https://v17.material.angular.io/components/toolbar/api enter image description here