如何在Angular Mat-Calendar中实现选中日期高亮（设置背景色）

嘿，这个需求我之前帮不少人解决过，Mat-Calendar的选中日期高亮其实有两种靠谱的实现方式，看你更倾向于全局主题统一还是局部快速定制——我给你拆解一下：

如果你希望选中日期的高亮风格和整个应用的Material主题保持统一，那用主题变量来配置是最优解，不会出现样式冲突的问题。

步骤很简单，找到你的全局主题文件（通常是styles.scss或者单独的theme.scss），在自定义主题的代码块里添加日历相关的颜色配置：

@use '@angular/material' as mat;

// 先定义你应用的基础调色板
$custom-primary: mat.define-palette(mat.$indigo-palette);
$custom-accent: mat.define-palette(mat.$pink-palette);
$custom-warn: mat.define-palette(mat.$red-palette);

// 自定义日历的选中日期样式
$custom-calendar-theme: mat.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
    warn: $custom-warn,
    // 这里专门配置日历的选中日期样式
    calendar: (
      selected-date-background: #2196F3, // 替换成你想要的高亮背景色
      selected-date-text: white, // 选中日期的文字颜色，可选
    )
  )
));

// 把主题应用到所有Material组件
@include mat.all-component-themes($custom-calendar-theme);

这样配置后，所有的Mat-Calendar组件选中日期都会自动用上你设置的背景色，完全符合Material Design的规范。

如果你只是想给某个特定的Mat-Calendar组件修改样式，或者不想动全局主题，那用样式穿透来直接覆盖默认样式会更快捷。

在使用MatCalendar的组件对应的.scss文件里添加以下代码：

// 覆盖选中日期的背景色
::ng-deep .mat-calendar-body-selected {
  background-color: #4CAF50 !important; // 自定义高亮色
  color: white !important; // 可选：设置文字颜色
  border-radius: 50%; // 保持默认的圆形样式，也可以改成方形比如4px
}

// 可选：添加鼠标悬停选中日期时的过渡效果
::ng-deep .mat-calendar-body-selected:hover {
  background-color: #45a049 !important;
}

如果担心样式污染其他日历组件，可以给你的MatCalendar包裹一个自定义类，然后限定选择器：

// 给日历组件的父元素加个类，比如 <div class="user-profile-calendar"><mat-calendar></mat-calendar></div>
.user-profile-calendar ::ng-deep .mat-calendar-body-selected {
  background-color: #FF9800 !important;
}

这里要注意：::ng-deep是Angular用来穿透组件样式隔离的语法，虽然官方现在更推荐用CSS变量或者主题，但对于Material组件的局部样式定制，它依然是最实用的方案之一。

小提示 #

• 颜色值可以用十六进制、RGB，或者直接引用Material的调色板变量，比如mat.get-color-from-palette($custom-accent, 500)。
• 如果用样式穿透后没生效，可以检查一下选择器的优先级，或者加上!important（虽然尽量少用，但Material组件的默认样式优先级很高，有时候不得不加）。

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