angular - De ce atribuirea lui [dateClass] în mat-calendar nu are niciun efect?

Aș dori să adaug niște stilizări personalizate pentru anumite zile afișate în componenta mat-calendar din Angular Material. După o mică cercetare, am dat peste proprietatea dateClass, care pare să fie potrivită pentru această sarcină. Deși am încercat mai multe lucruri, calendarul arată mereu la fel.

Configurarea mea actuală arată astfel:

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

Atribuirea [dateClass] pare să nu aibă niciun efect. M-aș aștepta ca toate zilele să aibă un fundal roșu, dar calendarul arată întotdeauna la fel: Calendar Angular Material

Răspuns #1

Actualizare :

OP a menționat că encapsulation: ViewEncapsulation.None este de asemenea necesar, deoarece a fost inclus în demo-ul de pe Stackblitz.

Original :

CSS-ul tău este prea general, astfel încât nu se aplică la nimic. Pentru a aplica CSS-ul la butoanele de dată, încearcă asta:

button.my-date {
  background: red;
}

Demonstrație Stackblizt

Rezultat :