angular - 自定义 Angular Material

Question

我有两个组件，名为 one.component.html 和 two.components.html。我试图只为一个组件自定义 Angular Material 日期选择器，而让另一个组件拥有 Angular Stock 日期选择器。如果我在 one.component.css 中编写自定义 css 代码，它不起作用。所以，我必须在 Style.css 中编写。但是在 Style.css 中编写将自定义这两个组件。如何在不同的组件中指定自定义？

Answer 1

shadow-piercing 后代组合器(已弃用)

您可以使用 ::ng-deep在相应组件的 CSS 定义中强制您的样式通过子组件树进入所有子组件 View ，例如:

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

自定义 CSS 类

或者，您可以为每个 DatePicker 分配不同的 CSS 类，然后使用 style.css 对其进行样式设置。 @angular/material/datepicker API为此，在 mat-datepicker 上提供了两个输入:

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

使用它，您的 OneComponent 模板现在看起来像这样:

<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>

和 style.css 中的相应样式如下:

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

如果您选择自定义 CSS 类解决方案，我建议您在组件文件夹中创建第二个 CSS 文件，其中仅包含您的日期选择器自定义样式，并将该文件导入您的 style.css 以让一切井井有条。

我创建了一个 Stackblitz 供您检查提到的可能性。