自定义角度材料

Question

我有两个组件，分别称为one.component.html和two.components.html。我只尝试为一个组件自定义Angular材质的日期选择器，而让另一个组件具有Angular Stock日期选择器。如果我在one.component.css中编写了一个自定义的CSS代码，它将无法正常工作。因此，我必须编写Style.css。但是在Style.css中编写将自定义这两个组件。如何在其他组件中指定自定义？

Answer 1

穿刺后代组合器（已弃用）

您可以::ng-deep在各个组件的CSS定义中使用，以将样式强制通过子组件树向下进入所有子组件视图，例如：

/* 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传递给日期选择器面板的类。支持与ngClass dateClass函数相同的语法 ，可用于向日期添加自定义CSS类

使用此功能，您的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类解决方案，建议您仅使用datepicker自定义样式在component文件夹中创建第二个CSS文件，然后将其导入到您的文件中style.css以保持所有内容的井井有条。

我为您创建了Stackblitz，以检查上述可能性。

Answer 2

更好的架构是使用自定义 SCSSdatepicker.scss在文件夹中创建一个文件。assets/scss并且您希望导入的组件具有日期选择器的自定义样式。 @import "src/assets/scss/datepicker.scss"; 通过这种方式，您可以在轻松实施的情况下增加设计的复杂性。