Angular Material主题未应用于mtx-datetimepicker，需单独配置吗？

结论 #

需要为mtx-datetimepicker单独配置主题——该组件不会自动继承Angular Material的默认主题样式，必须手动关联主题配置。

具体操作步骤 #

方式一：基于自定义Angular Material主题适配 #

如果你的项目已经定义了自定义Angular Material主题，按以下步骤操作：

1. 在全局样式文件（通常是styles.scss）中导入必要的样式依赖：

@use '@angular/material' as mat;
@use '@ng-matero/extensions/datetimepicker' as mtx-dtp;

2. 复用已有的自定义主题生成mtx-datetimepicker的主题样式：

// 假设你已定义了自定义主题$my-theme
$my-theme: mat.define-theme(
  (
    color: (
      primary: mat.define-palette(mat.$indigo-palette),
      accent: mat.define-palette(mat.$pink-palette),
      warn: mat.define-palette(mat.$red-palette),
    ),
  )
);

// 生成并应用mtx-datetimepicker主题
@include mtx-dtp.datetimepicker-theme($my-theme);

方式二：使用预构建主题快速适配 #

如果项目使用Angular Material的预构建主题，直接导入匹配的mtx-datetimepicker预构建主题即可：

// 在styles.scss中添加，选择与当前Angular Material主题一致的预构建文件
@import '@ng-matero/extensions/datetimepicker/prebuilt-themes/indigo-pink.css';

可选预构建主题包括：deeppurple-amber.css、pink-bluegrey.css、purple-green.css，请根据你的项目主题选择对应文件。

最后验证 #

保存样式文件后重启Angular开发服务器，mtx-datetimepicker即可应用对应的Angular Material主题样式。

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