升级至Angular v18后Material Theme样式失效问题求助

问题描述 #

将应用从Angular v16依次升级到v17、v18后，Material主题CSS失效，侧边栏、按钮、下拉框等组件无背景色。v16版本使用@import '@angular/material/theming'导入主题，升级后系统要求移除该行代码。目前保留自定义Material主题代码，但CSS变量未生效（如background-color: var(--mat-select-panel-background-color, var(--mat-app-surface-container))无法工作），且v16中存在的主题变量在v17/v18中缺失。

自定义主题代码：

@use '@angular/material' as mat;
@include mat.core();

/* ======== Angular material custom themes ======== */ 
$primary-palette:(
    50: #e6f7eb,
    100: #c3eace,
    200: #9bdcae,
    300: #70cf8e,
    400: #4bc475,
    500: #1ab95c,
    600: #0daa52,
    700: #009746,
    800: #00863b,
    900: #006626,
    A100: #c6eac0,
    A200: #9fdc97,
    A400: #52c447,
    A700: #009700,
    contrast: (
      50: rgba(black, 0.87),
      100: rgba(black, 0.87),
      200: rgba(black, 0.87),
      300: rgba(black, 0.87),
      400: rgba(black, 0.87),
      500: white,
      600: white,
      700: white,
      800: white,
      900: white,
      A100: rgba(black, 0.87),
      A200: rgba(black, 0.87),
      A400: white,
      A700: white,
    )
);
$main-custom-primary: mat.define-palette($primary-palette, 500, 300, 900);
$main-custom-accent:  mat.define-palette($mat-pink, 100, 500, A100);
$main-custom-warn:  mat.define-palette($mat-red,900);
$main-theme: mat.define-light-theme((
  color: (
    primary: $main-custom-primary,
    accent: $main-custom-accent,
    warn: $main-custom-warn,
  ),
  typography: mat.define-typography-config(
    $font-family: '"Inter", Arial, Helvetica, sans-serif',
    $body-1: mat.define-typography-level(
      $font-size: 14px,
      $line-height: 1.5,
    )
  )
));
@include mat.all-component-themes($main-theme);

package.json核心依赖片段：

"dependencies": {
  "@angular-builders/custom-webpack": "^13.1.0",
  "@angular-material-components/datetime-picker": "^16.0.1",
  "@angular/animations": "^18.2.2",
  "@angular/cdk": "^18.2.2",
  "@angular/material": "^18.2.2",
  ...
}

原因及修复方案 #

1. 适配v17+的CSS变量主题系统 #

Angular Material v17起切换为CSS变量驱动的主题架构，原代码仅调用mat.all-component-themes但未生成全局CSS变量，导致组件无法读取主题值。修改SCSS代码，添加变量生成步骤：

@use '@angular/material' as mat;

@include mat.core();

// 自定义调色板和主题定义保持不变
$primary-palette:(/* ... 你的调色板代码 ... */);
$main-custom-primary: mat.define-palette($primary-palette, 500, 300, 900);
$main-custom-accent:  mat.define-palette($mat-pink, 100, 500, A100);
$main-custom-warn:  mat.define-palette($mat-red,900);
$main-theme: mat.define-light-theme((/* ... 你的主题配置 ... */));

// 新增：生成全局CSS变量（v17+必须）
@include mat.generate-theme-variables($main-theme);

// 应用组件主题样式
@include mat.all-component-themes($main-theme);

2. 升级第三方Material依赖 #

@angular-material-components/datetime-picker仍为v16版本，与Angular v18不兼容，无法适配新的CSS变量系统。执行升级命令：

npm install @angular-material-components/datetime-picker@^18.0.0

3. 验证主题文件导入优先级 #

确保自定义主题SCSS在angular.json的styles数组中优先级最高，避免被默认主题覆盖：

"styles": [
  "src/styles.scss", // 你的自定义主题文件
  // 移除或注释默认Material主题："@angular/material/prebuilt-themes/indigo-pink.css"
]

4. 清理缓存并重建项目 #

升级残留的缓存可能导致样式未更新，执行以下命令：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
ng build

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