Angular Material 18+中Elevation（高程）处理问题求助

问题背景 #

Material 3规范里，不同层级的高程是靠表面色的亮度差异来区分的，不再用Material 2那套阴影逻辑。但在Angular Material 18项目里，工具栏、导航栏、卡片这些背景元素的高程表现完全一致，之前官方文档里的老高程类也失效了。

Material 3 高程规范（官方内容翻译） #

Material 3的高程系统通过调整表面颜色的明暗度来体现层级关系，替代了Material 2依赖阴影的实现方式。系统定义了0到12共13个高程层级，每个层级对应一组预设的颜色调整参数，层级越高，表面色与基础底色的对比度越强，以此在视觉上明确元素的前后叠加关系。这套逻辑同时适配亮色和暗色主题，确保在不同模式下都能清晰呈现层级差异。

正确实现方式 #

1. 确认主题配置启用M3 #

Angular Material 18默认启用M3，但得确保你的主题文件没强制用回M2。检查styles.scss（或你的主题文件）：

@use '@angular/material' as mat;

// 核心：确保主题配置包含elevation项
$app-theme: mat.define-theme(
  (
    color: (
      theme-type: light, // 切换dark即可启用暗色主题
      primary: mat.$indigo-palette,
      secondary: mat.$pink-palette,
    ),
    typography: mat.define-typography-config(),
    elevation: mat.define-elevation-config(), // 必须配置这个才会加载M3高程样式
  )
);

@include mat.all-component-themes($app-theme);

2. 使用M3专属的高程类 #

Angular Material 18彻底换掉了旧的mat-elevation-z*类，现在要配合使用基础表面类+层级类：

• 基础类：mat-mdc-elevation-surface（必须加，否则层级类不生效）
• 层级类：mat-mdc-elevation-z0 到 mat-mdc-elevation-z12（对应0-12级高程）

示例代码：

<!-- 工具栏用z4层级，视觉上比卡片突出 -->
<mat-toolbar class="mat-mdc-elevation-surface mat-mdc-elevation-z4">
  顶部导航栏
</mat-toolbar>

<!-- 卡片用z2层级 -->
<mat-card class="mat-mdc-elevation-surface mat-mdc-elevation-z2">
  <mat-card-title>示例卡片</mat-card-title>
  <mat-card-content>这是卡片内容</mat-card-content>
</mat-card>

3. 自定义高程颜色（可选） #

如果默认的层级颜色不符合需求，可以在主题配置里自定义各层级的表面色：

// 自定义亮色/暗色模式下的z4层级颜色
$custom-elevation: mat.define-elevation-config(
  (
    color: (
      light: (
        z4: rgba(0, 0, 0, 0.1), // 亮色模式下z4的表面色加深一点
      ),
      dark: (
        z4: rgba(255, 255, 255, 0.1), // 暗色模式下z4的表面色调亮一点
      )
    )
  )
);

// 把自定义配置加入主题
$app-theme: mat.define-theme(
  (
    elevation: $custom-elevation,
    // 其他主题配置...
  )
);

4. 组件内置高程检查 #

像mat-sidenav、mat-dialog这类组件默认已经集成了M3高程，要是没生效，检查：

• 有没有给组件加disableElevation属性，有的话删掉
• 确认主题样式已经正确导入到项目中

排查要点 #

• 类不生效？先检查主题配置里有没有elevation: mat.define-elevation-config()，没加的话高程样式根本不会加载
• 暗色模式下层级不明显？确认主题的theme-type设成了dark，否则颜色逻辑会出错
• 别同时混用M2和M3的高程类，会导致样式冲突

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