How to scope Angular Material Datepicker styles?

Question

I am trying to use the Angular Material Datepicker in multiple locations in my application. One of the usages is a legacy usage that is crucial to the application functioning properly. It's heavily used and should not be modified at all. The other usages are newer implementations that will eventually replace the legacy usage after all functionality is done. The new Datepickers are hidden behind a feature flag that can be modified while the application is running. We have noticed that when trying to style the Datepicker we have been using ng::deep and !important to style the Angular Material classes. However, this effect seems to be global as it's changing the legacy Datepicker as well.

How can we limit our SCSS changes to a single Datepicker only without impacting the others?

Project Structure

app
|
----calendar-1
    |
    ----calendar-1.html
    ----calendar-1.scss
    ----calendar-1.ts
|
----calendar-2
    |
    ----calendar-2.html
    ----calendar-2.scss
    ----calendar-2.ts

Problem

// calendar-2/calendar-2.scss

::ng-deep {
    mat-calendar {
      background-color: green;
      margin-top: -16px;
      width: 258px;
    }
}

calendar-1 and calendar-2 are both updated to reflect the styles within calendar-2/calendar-2.scss inside the ::ng-deep section since they are targeting the same Angular Material class names.

Answer 1

Can you please rephrase your question and add some code or picture for better understanding, still this can be achieved using custom class like for which datepicker you want to change the style add a custom class (firstDatePicker) to the mat-form-field and add the style as below

::ng-deep .firstDatePicker .mat-datepicker-toggle .mat-icon-button {color: #6c01e1 !important}