I'm trying to style my angular material date picker , However, it did not work by using many different approaches ( I am using Angular 17 and angular material 17.3.10). i saw many questions here being answered by using ::ng-deep , but it is deprecated now , so using this does not work:
:host ::ng-deep .mat-calendar {
display: block;
background-color: #b91212;
color: var(--mat-datepicker-calendar-container-text-color);
box-shadow: var(--mat-datepicker-calendar-container-elevation-shadow);
border-radius: var(--mat-datepicker-calendar-container-shape);
}
Also , tried to use panelClass but that did not work either. One thing to also mention that in Angular material Docs , styling is only provided for v19 . Can you guys help me ? i'll be grateful :)
Targeting the internal elements of the Angular Material components is not recommended, see their theming docs. Instead, you should set values for their CSS variables.
Angular Material v19 added an overrides SCSS API for each component, which allows customization of the appearance.
For example, to override the datepicker styles, use the following SCSS code:
@use '@angular/material' as mat;
// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
@include mat.datepicker-overrides((
calendar-container-background-color: #b91212,
// add more overrides here if needed ...
));
}
You can check the datepicker documentation for all possible values which you can override.
In case you are using an earlier version where this API is not available yet, the best solution is to directly provide values for their CSS variables:
// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
--mat-datepicker-calendar-container-background-color: #b91212;
// add more variables here if needed ...
}
As soon as you update your app to Angular v19 or later, you should refactor the code and use the overrides mixins, as only those are officially supported.