Customize Angular Material

shadow-piercing descendant combinator (deprecated)

You can use ::ng-deep in the CSS definition of the respective component to force your style down through the child component tree into all the child component views, e.g.:

/* two.component.css */
::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){
  border-color:darkblue;
}

Custom CSS classes

Alternatively, you can assign different CSS classes for each DatePicker, which you then style using style.css. The @angular/material/datepicker API provides two inputs on mat-datepicker for that purpose:

panelClass Classes to be passed to the date picker panel. Supports the same syntax as ngClass dateClass Function that can be used to add custom CSS classes to dates

Using this, your OneComponent template could now look like this:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker panelClass="datepickerOne"></mat-datepicker>
</mat-form-field>

and the corresponding styling in style.css like this:

.datepickerOne .mat-calendar-body-today:not(.mat-calendar-body-selected){
  border-color: darkgreen;
}

If you opt for the custom CSS class solution, I'd suggest you create a second CSS file within your component folder with only your datepicker custom styles and import that one into your style.css to keep everything organized.

I've created a Stackblitz for you to check out the mentioned possibilities.

Better architecture would be creating a datepicker.scss file in assets/scss folder with your custom SCSS. And the importing inside the components you wish have the custom-styling of datepicker. @import "src/assets/scss/datepicker.scss"; This way you can add complexity to your designs in an easy-implementation.

You can leverage ng-deep selector. It has been deprecated for a long time but not replaced with anything by CSS workgroup yet. Many developers are still using it since alternative ways have their own drawbacks too.

Inside your component's css file you can have something like this:

  ::ng-deep yourcomponent{
    //custom css
  }