如何调整角度材质的数据报头样式？

Question

我正在尝试在我的应用程序中的多个位置使用角材料数据报警器。其中一种用法是对应用程序正常工作至关重要的遗留用法。它被大量使用，根本不应该被修改。其他用法是较新的实现，最终将在所有功能完成后取代遗留使用。新的数据启动器隐藏在功能标志后面，可以在应用程序运行时进行修改。我们注意到，当试图对数据报警器进行样式设计时，我们一直在使用ng::deep和!important来对角材料类进行样式化。然而，这种影响似乎是全球性的，因为它也在改变遗留的数据报警器。

我们如何将我们的SCSS更改限制在一个数据链路上，而不影响其他的？

项目结构

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中的样式，因为它们的目标是相同的角材料类名。

Answer 1

请您重新表述您的问题，并添加一些代码或图片以更好地理解，但是可以使用自定义类来实现，比如您想要更改样式的datepicker，将一个自定义类(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;
        }
    }
}