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

myzjeezk 于 2022-11-18 发布在 TypeScript

关注(0)|答案(1)|浏览(91)

我想为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 Calendar

1条答案

更新：
OP指出encapsulation: ViewEncapsulation.None也是需要的，因为它包含在stackblitz演示中。
原件：
你的css太宽了，所以它没有被应用到任何东西上。要把css应用到日期按钮上，试试这个：

button.my-date {
  background: red;
}