angular - 如何更改 Angular Material Datepicker 主题?

标签 angular themes angular7 angular-material-7 angular8

我想更改默认 Angular Material Datepicker 的主题。我找不到关于这个问题的任何有用信息(我只找到 AngularJS 或旧的 Angular Material)。我使用的是默认 CSS,但我根据自己的喜好对其进行了修改。

这是日期选择器的样子: https://imgur.com/YmJctem

我想把它改成这种类型: https://imgur.com/oVlwCDK

我想使用 Material 日期选择器,因为我实现了一些代码并且它只适用于 Material 日期选择器。

也许这听起来很有趣,但我想为 Angular Material Datepicker 添加一个 Datepicker Material Design。

感谢您的帮助/建议!

最佳答案

如果你能为我们提供一个 plunker,事情会变得更容易。

为了实现您想要的效果,您需要覆盖默认的 Angular Material CSS 类。快速浏览后,您将看到(使用检查)每个元素都有一个 css 类,如“mat-calendar-header”。 您有两个选择:

  1. 使用::ng-deep 伪类。 如果要对此类应用自定义样式,可以通过添加 伪类::ng-deep,在你想要的angular material css类前面 覆盖。这种样式可以添加到 Angular 组件特定的 css 文件中。

    Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. Any style with ::ng-deep applied becomes a global style.

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

  2. 覆盖全局 styles.css 文件中的 Angular Material css 类

关于angular - 如何更改 Angular Material Datepicker 主题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56525157/

相关文章:

javascript - 如何检查变量是否存在

css - ASP.Net 主题、用户控件和 CSS

NetBeans,黑色背景主题

angular - Angular 单文件组件支持 sass/scss 吗?

css - 如何在加载时在第一个元素上设置动画?

使用 toHaveBeenCalled 进行 Angular Jasmine 测试

c++ - 如何使用 Qt C++ 从 linux 桌面环境获取当前主题名称

rxjs - 如何使用 rxjs 从后端 api 获取 header 属性?

javascript - uploadTask.snapshot.downloadURL 未在响应中给出文件的下载 URL

javascript - AWS Cognito - SerializationException(在不期望的位置找到结构或 map 的开始)