Angular Material组件无样式无功能问题求助

问题根源是Angular核心版本（14）和Angular Material版本（7）严重不兼容，这是导致组件无样式、无功能且点击报错的核心原因。另外主题配置不完整，只导入了主题文件但未初始化，也会导致样式无法生效。

1. 统一Angular Material版本 #

打开package.json，将@angular/material的版本修改为与Angular核心一致的^14.0.0，修改后依赖部分如下：

"dependencies": {
  "@angular/animations": "^14.0.0",
  "@angular/common": "^14.0.0",
  "@angular/compiler": "^14.0.0",
  "@angular/core": "^14.0.0",
  "@angular/forms": "^14.0.0",
  "@angular/material": "^14.0.0",
  "@angular/platform-browser": "^14.0.0",
  "@angular/platform-browser-dynamic": "^14.0.0",
  "@angular/router": "^14.0.0",
  "rxjs": "~7.5.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.11.4"
},

执行命令重新安装依赖：

npm install

2. 完整配置Angular Material主题 #

你的style.scss仅导入了主题文件但未初始化，需补充主题配置代码，二选一即可：

方案一：使用预定义主题 #

直接引入官方预构建的主题文件：

@import "@angular/material/prebuilt-themes/indigo-pink.css";

body {
  --bgColor: rgb(44 56 72);
  --lightOrange: #f55a04;
  --medOrange: #f53303;
  background-color: var(--bgColor);
}

.shadow-border {
  box-shadow: 0 3px 1px -2px rgb(0 0 0 / 10%), 0 1px 1px rgb(0 0 0 / 10%), 0 1px 2px rgb(0 0 0 / 10%) !important;
  border: 1px solid #435162;
  border-radius: 12px;
}

方案二：自定义主题 #

如果需要定制主题颜色，使用以下代码：

@import "@angular/material/theming";

// 初始化Material核心样式
@include mat-core();

// 定义主题调色板
$app-primary: mat-palette($mat-indigo);
$app-accent: mat-palette($mat-pink, A200, A100, A400);
$app-warn: mat-palette($mat-red);

// 创建主题实例
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

// 将主题应用到所有Material组件
@include angular-material-theme($app-theme);

body {
  --bgColor: rgb(44 56 72);
  --lightOrange: #f55a04;
  --medOrange: #f53303;
  background-color: var(--bgColor);
}

.shadow-border {
  box-shadow: 0 3px 1px -2px rgb(0 0 0 / 10%), 0 1px 1px rgb(0 0 0 / 10%), 0 1px 2px rgb(0 0 0 / 10%) !important;
  border: 1px solid #435162;
  border-radius: 12px;
}

3. 验证模块导入 #

你的app.module.ts已正确导入MatExpansionModule和BrowserAnimationsModule，无需修改。

完成以上步骤后，重启项目（ng serve），组件的样式和折叠功能即可恢复正常。

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