如何更改Angular Material Datepicker主题？

Question

我想更改默认角度材质Datepicker的主题。 我找不到有关此问题的任何有用信息（我只为AngularJS或旧的Angular Material找到）。 我使用的是默认CSS，但已将其修改为我的首选项。

日期选择器的外观如下： https ://imgur.com/YmJctem

我想将其更改为以下类型： https : //imgur.com/oVlwCDK

我想使用物料日期选择器，因为我实现了一些代码，并且仅适用于物料日期选择器。

也许听起来很有趣，但我想向“角度材质” Datepicker添加一个Datepicker材质设计。

感谢您的帮助/咨询！

Answer 1

如果您可以为我们提供塞子，将使事情变得容易。

为了实现您想要的功能，您需要覆盖默认的角度材质CSS类。 快速浏览后，您将看到（使用inspect）每个元素都有一个css类，如“ mat-calendar-header”。 您有两种选择：

1. 使用:: ng-deep伪类。 如果要对此类应用自定义样式，可以通过在要覆盖的角形材质css类前面添加伪类:: ng-deep来实现此目的。 可以在特定于角度组件的css文件中添加此样式。

   将:: ng-deep伪类应用于任何CSS规则将完全禁用该规则的视图封装。 任何应用:: ng-deep的样式都将成为全局样式。

   例如::ng-deep .mat-calendar-header{background-color: red;}

2. 覆盖全局styles.css文件中的角形材质CSS类