Не удалось найти основную тему Angular Material angular 18

Я попробовал точные шаги, вот что я заметил.

Установщик не изменяет styles.scss, а добавляет к angular.json стиль по умолчанию:

...
"styles": [
          "@angular/material/prebuilt-themes/azure-blue.css",
          "src/styles.scss"
        ],
        ...

После этого включаем кнопки по умолчанию html и ts, как показано ниже. Ниже приведена рабочая демо-версия Stackblitz.

Ц:

import { Component } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatButtonModule, MatDividerModule, MatIconModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'test';
}

HTML:

<section>
  <div class = "example-label">Basic</div>
  <div class = "example-button-row">
    <button mat-button>Basic</button>
    <button mat-button color = "primary">Primary</button>
    <button mat-button color = "accent">Accent</button>
    <button mat-button color = "warn">Warn</button>
    <button mat-button disabled>Disabled</button>
    <a mat-button href = "https://www.google.com/" target = "_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class = "example-label">Raised</div>
  <div class = "example-button-row">
    <button mat-raised-button>Basic</button>
    <button mat-raised-button color = "primary">Primary</button>
    <button mat-raised-button color = "accent">Accent</button>
    <button mat-raised-button color = "warn">Warn</button>
    <button mat-raised-button disabled>Disabled</button>
    <a mat-raised-button href = "https://www.google.com/" target = "_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class = "example-label">Stroked</div>
  <div class = "example-button-row">
    <button mat-stroked-button>Basic</button>
    <button mat-stroked-button color = "primary">Primary</button>
    <button mat-stroked-button color = "accent">Accent</button>
    <button mat-stroked-button color = "warn">Warn</button>
    <button mat-stroked-button disabled>Disabled</button>
    <a mat-stroked-button href = "https://www.google.com/" target = "_blank"
      >Link</a
    >
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class = "example-label">Flat</div>
  <div class = "example-button-row">
    <button mat-flat-button>Basic</button>
    <button mat-flat-button color = "primary">Primary</button>
    <button mat-flat-button color = "accent">Accent</button>
    <button mat-flat-button color = "warn">Warn</button>
    <button mat-flat-button disabled>Disabled</button>
    <a mat-flat-button href = "https://www.google.com/" target = "_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class = "example-label">Icon</div>
  <div class = "example-button-row">
    <div class = "example-flex-container">
      <button
        mat-icon-button
        aria-label = "Example icon button with a vertical three dot icon"
      >
        <mat-icon>more_vert</mat-icon>
      </button>
      <button
        mat-icon-button
        color = "primary"
        aria-label = "Example icon button with a home icon"
      >
        <mat-icon>home</mat-icon>
      </button>
      <button
        mat-icon-button
        color = "accent"
        aria-label = "Example icon button with a menu icon"
      >
        <mat-icon>menu</mat-icon>
      </button>
      <button
        mat-icon-button
        color = "warn"
        aria-label = "Example icon button with a heart icon"
      >
        <mat-icon>favorite</mat-icon>
      </button>
      <button
        mat-icon-button
        disabled
        aria-label = "Example icon button with a open in new tab icon"
      >
        <mat-icon>open_in_new</mat-icon>
      </button>
    </div>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class = "example-label">FAB</div>
  <div class = "example-button-row">
    <div class = "example-flex-container">
      <div class = "example-button-container">
        <button
          mat-fab
          color = "primary"
          aria-label = "Example icon button with a delete icon"
        >
          <mat-icon>delete</mat-icon>
        </button>
      </div>
      <div class = "example-button-container">
        <button
          mat-fab
          color = "accent"
          aria-label = "Example icon button with a bookmark icon"
        >
          <mat-icon>bookmark</mat-icon>
        </button>
      </div>
      <div class = "example-button-container">
        <button
          mat-fab
          color = "warn"
          aria-label = "Example icon button with a home icon"
        >
          <mat-icon>home</mat-icon>
        </button>
      </div>
      <div class = "example-button-container">
        <button
          mat-fab
          disabled
          aria-label = "Example icon button with a heart icon"
        >
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
    </div>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class = "example-label">Mini FAB</div>
  <div class = "example-button-row">
    <div class = "example-flex-container">
      <div class = "example-button-container">
        <button
          mat-mini-fab
          color = "primary"
          aria-label = "Example icon button with a menu icon"
        >
          <mat-icon>menu</mat-icon>
        </button>
      </div>
      <div class = "example-button-container">
        <button
          mat-mini-fab
          color = "accent"
          aria-label = "Example icon button with a plus one icon"
        >
          <mat-icon>plus_one</mat-icon>
        </button>
      </div>
      <div class = "example-button-container">
        <button
          mat-mini-fab
          color = "warn"
          aria-label = "Example icon button with a filter list icon"
        >
          <mat-icon>filter_list</mat-icon>
        </button>
      </div>
      <div class = "example-button-container">
        <button
          mat-mini-fab
          disabled
          aria-label = "Example icon button with a home icon"
        >
          <mat-icon>home</mat-icon>
        </button>
      </div>
    </div>
  </div>
</section>

У Stackblitz возникли проблемы с запуском; скачайте проект и запустите его.

Stackblitz -> cd test -> npm i && npm run start

Возникла проблема с размещением маркера, загруженного M3, в версии 18.0.0 Angular Material Components. Проблема решена в версии библиотеки 18.0.1. Вы можете найти соответствующую проблему , журнал релизов и соответствующее исправление на GitHub.

Попробуйте обновить @angular/material до версии 18.0.1, чтобы решить вашу проблему.