angular - 为什么在 mat-calendar 中分配 [dateClass] 没有效果？

我想为 Angular Material 的 mat-calendar 组件中显示的某些日期添加一些自定义样式。经过一番研究，我发现 dateClass 属性似乎适合这个任务。但无论我尝试了什么，日历总是看起来一样。

我当前的设置如下：

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; }

分配 [dateClass] 似乎完全没有效果。我原本期望所有日期都有红色背景，但日历总是看起来一样：Angular Material 日历

答案＃1

更新：

OP指出还需要encapsulation: ViewEncapsulation.None，因为它在stackblitz演示中也被包含。

原文：

你的CSS选择器太宽泛，因此没有应用到任何东西。要将CSS应用到日期按钮，试试这个：

button.my-date {
  background: red;
}

Stackblizt 演示

结果 :