Как обрабатывать возвышение в Angular Material 18+?

Кажется, это известная P4 ошибка в угловом материале. Это до сих пор не исправлено, было поднято для углового 15.

ошибка (mat-card): mat-elevation-zx больше не работает для mat-card после обновления до версии 15 — проблема на Github

Проголосуйте за эту проблему, чтобы она была исправлена ​​в будущем.

Причина, по которой вы получаете эту проблему, заключается в том, что стили темы имеют больший приоритет, чем класс возвышения, поэтому тень поля не применяется.

Что касается временного решения.

Все, что вам нужно сделать, чтобы реализовать временный обходной путь от пользователя GoodGuyGregory

@for $i from 0 through 24 {
  .mat-mdc-card.mat-elevation-z#{$i} {
    @include mat.elevation($i);
  }
}

Мы воссоздаем классы высот на уровне таблицы стилей angular, чтобы решить проблему приоритета.

Если для других компонентов углового материала, попробуйте приведенное ниже исправление, которое я использую !important, чтобы гарантировать применение переопределения.

@for $i from 0 through 24 {
  .mat-elevation-z#{$i} {
    @include mat.elevation($i) !important;
  }
}

Таким образом, конечный результат будет:

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
  )
);

body {
  @include mat.all-component-themes($theme);
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;
}

html {
  height: 100%;
}

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);

@for $i from 0 through 24 {
  .mat-mdc-card.mat-elevation-z#{$i} {
    @include mat.elevation($i);
  }
}

Демо-версия Stackblitz

Документация по высоте угловых материалов