如何限定 Angular Material 日期选择器样式的范围？

Question

我正在尝试在我的应用程序的多个位置使用 Angular Material Datepicker。其中一种用法是对应用程序正常运行至关重要的遗留用法。它被大量使用，根本不应该被修改。其他用法是较新的实现，在完成所有功能后最终将取代旧用法。新的日期选择器隐藏在一个功能标志后面，可以在应用程序处于运行时进行修改。我们注意到，在尝试设置日期选择器的样式时，我们一直在使用 ng::deep 和 !important 来设置 Angular Material classes 的样式。然而，这种效果似乎是全球性的，因为它也在改变遗留的日期选择器。

我们如何才能将我们的 SCSS 更改限制在单个 Datepicker 上而不影响其他人？

项目结构

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

问题

// calendar-2/calendar-2.scss

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

calendar-1 和 calendar-2 都更新以反映 ::ng-deep 部分内 calendar-2/calendar-2.scss 内的样式，因为它们针对相同的 Angular Material class 个名字。

Answer 1

你能否重新表述你的问题并添加一些代码或图片以便更好地理解，这仍然可以使用自定义 class 来实现，比如你想要更改样式的日期选择器添加自定义 class (firstDatePicker) 到 mat-form-field 并添加如下样式

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

Answer 2

经过数小时的努力，解决方案实际上相当简单。我们必须将 ng::deep 引用移动到另一个特定于组件的选择器中，这样样式就不会全局应用。

<!-- calendar-2/calendar-2.html -->

<div class="calendar-2">
    <mat-calendar
      [dateFilter]="dateFilter"
      [selected]="selected"
      [startAt]="startAt"
      [minDate]="minDate"
      [maxDate]="maxDate"
      (selectedChange)="selectedChange($event)"
    >
    </mat-calendar>
</div>

// calendar-2/calendar-2.scss

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

如何限定 Angular Material 日期选择器样式的范围？

How to scope Angular Material Datepicker styles?

angular

angular-material

angular-material-datetimepicker

项目结构

问题