-2

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

我们如何才能将我们的 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都更新以反映该部分calendar-2/calendar-2.scss内的样式，::ng-deep因为它们的目标是相同的 Angular Material 类名称。

4

2 回答 2

1

您能否重新表述您的问题并添加一些代码或图片以便更好地理解，这仍然可以使用自定义类来实现，例如您想要更改样式的日期选择器添加自定义类（firstDatePicker）到垫子表单字段并添加样式如下

::ng-deep .firstDatePicker .mat-datepicker-toggle .mat-icon-button {color: #6c01e1 !important}
于 2022-02-26T15:57:39.150 回答
0

经过数小时的努力，解决方案实际上相当简单。我们必须在另一个特定于组件的选择器中移动我们的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;
        }
    }
}
于 2022-02-28T19:35:58.453 回答