如何为Angular 15的ngx-mat-datetime-picker应用默认主题？

问题根源 #

ngx-mat-datetime-picker依赖Angular Material的主题体系，直接修改node_modules里的CSS不可靠（下次执行npm install就会被覆盖），再加上Angular 15的主题结构有调整，导致组件未正确继承主题样式变量，才出现选了日期但看不到高亮的情况。

正确应用默认主题的步骤 #

1. 对齐依赖版本 #

Angular 15需搭配同大版本的ngx-mat-datetime-picker，直接安装15.x系列版本：

npm install ngx-mat-datetime-picker@15 --save

2. 在全局样式中引入主题与组件样式 #

找到项目根目录的styles.scss（若使用CSS则为styles.css），先引入Angular Material预构建主题，再添加ngx-mat-datetime-picker的核心样式：

// 选择任意一款Angular Material预构建主题即可
@import '@angular/material/prebuilt-themes/indigo-pink.css';
// 可选主题：deeppurple-amber.css、pink-bluegrey.css、purple-green.css

// 引入ngx-mat-datetime-picker的样式文件
@import 'ngx-mat-datetime-picker/assets/style/picker.min.css';

3. 恢复node_modules默认样式，避免冲突 #

先撤销之前对node_modules中CSS的修改，最简单的方式是删除依赖后重新安装：

rm -rf node_modules package-lock.json
npm install

同时检查自定义样式是否覆盖了.mat-calendar-body-selected这类组件默认样式，若需自定义，使用更具体的选择器（比如给日期选择器添加专属类名）：

// 自定义选中日期样式（可选）
.my-custom-picker .mat-calendar-body-selected {
  background-color: #1976d2;
  color: #fff;
}

4. 自定义主题需补全配置 #

若使用自定义主题，需确保主题包含所有Angular Material组件样式，并在主题之后引入ngx的样式：

@use '@angular/material' as mat;

// 定义主题色板
$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette);
$my-warn: mat.define-palette(mat.$red-palette);

// 生成自定义主题
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  )
));

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

// 最后引入ngx样式，确保继承主题变量
@import 'ngx-mat-datetime-picker/assets/style/picker.min.css';

验证 #

完成配置后重启Angular开发服务器：

ng serve

再次点击日历选择日期，即可看到选中日期的正常高亮样式。

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