bug(Datepicker): Cannot highlight specific dates with v13

[keith-aa]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Tried running the "Highlighting specific dates" example from https://material.angular.io/components/datepicker/overview on Stackblitz. It would not highlight. Also, tried downloading the example and updating to latest release. It still did not work.

Expected

Actual

Reproduction

Steps to reproduce:

1. Download angular-date-class-filter-13.zip
2. Extract zip file.
3. npm install
4. ng serve --port 4000
5. Open browser to port 4000
6. Click calendar icon

Expected Behavior

Expected to see the 1st and 20th highlighted.

Actual Behavior

Neither day is highlighted.

Environment

C:\Temp\examples\angular-date-class-filter-13>ng version

Angular CLI: 13.2.2
Node: 16.13.2
Package Manager: npm 8.1.2
OS: win32 x64

Angular: 13.2.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1302.2
@angular-devkit/build-angular 13.2.2
@angular-devkit/core 13.2.2
@angular-devkit/schematics 13.2.2
@angular/cdk 13.2.1
@angular/material 13.2.1
@schematics/angular 13.2.2
rxjs 7.4.0
typescript 4.4.4

[crisbeto]

The class does get assigned correctly. The problem appears to be that the background: none added in the following change has a higher specificity and overrides the background from the custom class. 43db844#diff-c9da88d358126fd9af0bcfe70ca9dce66f53916557502d2e817772d860c9822cR48

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}