Angular Material中mat-calendar的[dateClass]赋值无效的原因？

你通过dateClass属性为mat-calendar日期添加自定义样式但未生效，核心问题出在Angular组件样式隔离机制和Material内置样式优先级上，以下是具体解决步骤：

当前代码回顾 #

calendar.component.ts #

dateClass = (date: Date): MatCalendarCellCssClasses => { return 'my-date'; }

calendar.component.html #

<mat-calendar [dateClass]="dateClass"></mat-calendar>

calendar.component.css #

.my-date { background-color: red; }

解决方法 #

方法1：用::ng-deep穿透样式隔离 #

Angular默认的视图封装会给组件样式添加唯一前缀，导致自定义类无法作用到mat-calendar内部的单元格元素。通过::ng-deep可以穿透这种隔离，同时添加!important覆盖Material内置的单元格样式优先级：

修改calendar.component.css：

::ng-deep .my-date {
  background-color: red !important;
}

方法2：关闭组件视图封装 #

在组件元数据中关闭ViewEncapsulation，让组件样式全局生效（注意避免样式污染其他组件）：

修改calendar.component.ts：

import { Component, ViewEncapsulation } from '@angular/core';
import { MatCalendarCellCssClasses } from '@angular/material/datepicker';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})
export class CalendarComponent {
  dateClass = (date: Date): MatCalendarCellCssClasses => { return 'my-date'; }
}

方法3：将样式放到全局样式文件 #

把自定义样式添加到项目根目录的styles.css（或styles.scss）中，全局样式不受组件隔离限制：

.my-date {
  background-color: red !important;
}

扩展：给特定日期添加样式 #

如果需要仅为特定日期（比如今天、节假日）设置样式，修改dateClass函数的判断逻辑即可：

dateClass = (date: Date): MatCalendarCellCssClasses => {
  const today = new Date();
  // 判断是否为今天
  const isToday = date.getDate() === today.getDate() && 
                  date.getMonth() === today.getMonth() && 
                  date.getFullYear() === today.getFullYear();
  return isToday ? 'my-date' : '';
}

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