如何通过自定义主题修改Angular Material 18的MatDatePicker颜色

你当前的SCSS写法无法生效的原因在于：mat.datepicker-color的作用范围不对，且未针对日期范围选择器的输入框部分单独应用主题。以下是正确的修改方案：

正确的SCSS配置 #

如果是在组件样式文件中修改：

@use '@angular/material' as mat;
@use './path-to-your-theme/m3-blue-theme' as m3-blue-theme;

// 作用于当前组件内的日期选择器
:host {
  // 配置日期范围输入框的主题样式
  @include mat.date-range-input-theme(m3-blue-theme.$light-theme);

  // 配置弹出日期面板的颜色
  .mat-mdc-datepicker-popup {
    @include mat.datepicker-theme(m3-blue-theme.$light-theme);
    @include mat.datepicker-color(m3-blue-theme.$light-theme, $color-variant: primary);
  }
}

如果是全局样式（styles.scss）：

@use '@angular/material' as mat;
@use './path-to-your-theme/m3-blue-theme' as m3-blue-theme;

// 全局应用日期选择器及输入框主题
@include mat.datepicker-theme(m3-blue-theme.$light-theme);
@include mat.date-range-input-theme(m3-blue-theme.$light-theme);

// 自定义弹出面板的颜色变体
.mat-mdc-datepicker-popup {
  @include mat.datepicker-color(m3-blue-theme.$light-theme, $color-variant: primary);
}

关键说明 #

1. 作用范围：mat.datepicker-color需要绑定到日期面板的容器类.mat-mdc-datepicker-popup上，才能正确覆盖面板内的按钮、选中日期等元素颜色。
2. 日期范围输入框：单独使用mat.date-range-input-theme处理输入框的边框、图标等样式，mat.datepicker-theme仅作用于弹出的日期选择面板。
3. 主题有效性：确保你的m3-blue-theme.$light-theme是通过Material 3的mat.define-light-theme正确生成的，包含完整的color、typography、density配置。

另外检查你的HTML是否包含对应的日期选择器实例：

<mat-date-range-picker #picker></mat-date-range-picker>

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