Repository navigation
bug(mat-datepicker): overrides mixin not working for period button #33968
Description
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
Mixin does not properly apply the following properties:
calendar-period-button-text-size
calendar-period-button-text-weight
The .mat-mdc-button class takes precedence over the .mat-calendar-period-button class and is not using the calendar-period variables
Reproduction
StackBlitz link:
https://stackblitz.com/edit/xrfsawq4?file=src%2Fexample%2Fdate-range-picker-overview-example.ts,src%2Fstyles.scss&startScript=start
Steps to reproduce:
- Click the calendar toggle button to open the datepicker
- See that the color is correctly getting applied but the size and weight are not properly getting applied
Expected Behavior
The mixin should set the size and weight of the period button
Actual Behavior
The mixin does not set the size and weight of the period button
Environment
- Angular: 21.2.14
- CDK/Material: 21.2.14
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS Tahoe 26.7.1
Activity
lazerg commentedon Oct 17, 2026
It is a bug. The color works because the datepicker sets it through the button's CSS variable. Size and weight are set directly, with the same specificity as
.mat-mdc-button, so load order decides who wins (calendar.scss). Until there is a fix, you can set them through the button tokens: