Angular Material 16.1.5：mat-card默认elevation不生效，hover正常

你的自定义默认elevation(7)不生效，核心原因是mat-card组件本身自带默认的elevation样式（默认层级为2），它的样式优先级比你的.my-custom-elevation类更高，直接覆盖了你设置的默认层级。而hover状态因为使用了:hover伪类，样式优先级高于组件默认样式，所以能正常生效。

解决办法 #

方法一：提升选择器优先级（推荐） #

修改SCSS选择器，直接指定mat-card标签与自定义类的组合，这样选择器权重会超过组件默认样式：

@use '@angular/material' as mat;
@import '@angular/material/prebuilt-themes/indigo-pink.css';

mat-card.my-custom-elevation {
  @include mat.elevation-transition();
  @include mat.elevation(7);

  &:hover {
    @include mat.elevation(24);
  }
}

方法二：使用!important强制覆盖（不推荐） #

如果临时需要快速生效，可以给默认elevation样式添加!important，但这种方式会破坏样式优先级规则，尽量少用：

@use '@angular/material' as mat;
@import '@angular/material/prebuilt-themes/indigo-pink.css';

.my-custom-elevation {
  @include mat.elevation-transition();
  @include mat.elevation(7) !important;

  &:hover {
    @include mat.elevation(24);
  }
}

内容的提问来源于stack exchange，提问作者leroyv