Angular 15升级至19后mat-raised-button样式失效问题求助

将Angular项目从15版本升级至19版本后，mat-raised-button组件虽能在DOM中渲染，但丢失了Material Design样式，仅显示为普通HTML按钮。相关代码如下：

主题SCSS代码 #

@use '@angular/material' as mat;

// This file can be used to create a base theme CSS file for a brand.
// To export the CSS file, run: ./node_modules/node-sass/bin/node-sass src/brand-theme.scss  dist/brand-theme.css

@include mat.elevation-classes();
@include mat.app-background();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat.m2-define-palette(mat.$m2-red-palette);
$candy-app-accent:  mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn: mat.m2-define-palette(mat.$m2-indigo-palette);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat.m2-define-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,
  ),
  typography: mat.m2-define-typography-config(),
  density: 0,
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($candy-app-theme);

按钮HTML代码 #

<button *ngIf="!task.completed" mat-raised-button class="right" [routerLink]="['/sign', task.taskId]" color="primary">
  <i class="material-icons">create</i>
  {{ getMessage('task.button') }}
</button>

核心原因 #

Angular Material 19默认启用Material Design 3（M3）主题系统，你的主题配置仍使用Material Design 2（M2）的API，但mat.all-component-themes混入现在默认指向M3组件样式，导致M2主题无法正确应用到按钮组件。

方案1：保留M2主题（兼容现有配置） #

修改主题文件的最后一行，将通用组件主题混入替换为M2专属版本：

// 替换原有的 @include mat.all-component-themes($candy-app-theme);
@include mat.m2-all-component-themes($candy-app-theme);

同时确保：

• @angular/material和@angular/cdk版本与Angular 19完全一致，避免版本不匹配
• 主题文件已正确导入到全局样式中（比如在styles.scss添加@use './path/to/brand-theme.scss';）

方案2：切换到M3主题（推荐长期方案） #

Angular 19主推M3，建议迁移到M3主题系统，修改主题配置如下：

@use '@angular/material' as mat;

@include mat.elevation-classes();
@include mat.app-background();

// 使用M3调色板定义函数
$candy-app-primary: mat.define-palette(mat.$red-palette);
$candy-app-accent:  mat.define-palette(mat.$pink-palette, A200, A100, A400);
$candy-app-warn: mat.define-palette(mat.$indigo-palette);

// 创建M3浅色主题
$candy-app-theme: mat.define-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

// 应用M3组件主题
@include mat.all-component-themes($candy-app-theme);

额外检查项 #

1. 确认MatButtonModule已正确导入到使用按钮的NgModule中：

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    // ...其他模块
    MatButtonModule
  ]
})
export class YourModule { }

2. 清理项目缓存：执行ng clean后重新构建，避免旧样式缓存干扰

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