自定义角度材料

Question

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

Answer 1

更好的体系结构是使用您的自定义SCSS在datepicker.scss文件夹中创建一个assets/scss文件。您希望的组件内部导入具有日期选择器的自定义样式。     @import "src/assets/scss/datepicker.scss"; 这样，您可以轻松实现设计的复杂性。

Answer 2

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

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

/* 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中，以保持一切井井有条。 / p>

我已经创建了一个 Stackblitz 供您查看所提到的可能性。

Answer 3

您可以利用ng-deep选择器。它已被弃用很长时间，但CSS工作组尚未替换任何东西。许多开发人员仍在使用它，因为替代方法也有其自身的缺点。

在组件的css文件中，您可以看到以下内容：

  ::ng-deep yourcomponent{
    //custom css
  } 

Answer 4

您仍然可以使用此

::ng-deep mycomponent{
    //custom css
}

Answer 5

另一个可行的解决方案是在组件上不使用View Encapsulation，因此您可以将样式添加到one.component.scss中，而不必将其添加到styles.scss中。否则可能会覆盖所有组件。