Styling Angular Material datepicker

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 🙂

>Solution :

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+

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.

Angular Material v17 / v18

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.