为 Angular 6 自定义 Angular Material Datepicker 大小答案

【问题标题】：Customize Angular Material Datepicker size for Angular 6为 Angular 6 自定义 Angular Material Datepicker 大小
【发布时间】：2019-07-29 11:08:31
【问题描述】：

我想在 Angular 6 中重置 Angular Material datepicker 的宽度和高度。

我已经检查了 chrome 中 datepicker 元素的类，并使用它如下

.mat-datepicker-content .mat-calendar{
    width: unset !important;
    height: unset !important;
}

当我在 chrome 中更改属性时，它会反映在 UI 中，但是当我在代码中添加它时，它不会应用于 DatePicker。

我在 Angular Material Model 组件中使用过 Datepicker。

请帮忙。

【问题讨论】：

试着把它放在里面 :host ::ng-deep { }

标签： angular datepicker angular-material

【解决方案1】：

有两种方法可以应用这个 css

在主 style.scss 或 style.css 中添加相同的样式

或

在样式代码前添加 ::ng-deep 例如：

::ng-deep.mat-datepicker-content .mat-calendar{
    width: unset !important;
    height: unset !important;
}

【讨论】：

【解决方案2】：

要对材质内置 css 类进行编辑，您必须使用::ng-deep，如下所示。

::ng-deep .mat-datepicker-content .mat-calendar{
    width: 100px !important;
    height: 100px !important;
}

请注意，它仅适用于特定封装。请参阅official site 的以下评论。

仅在模拟视图封装中使用 /deep/、>>> 和 ::ng-deep。 Emulated 是默认和最常用的视图封装。为了更多信息，请参阅控制视图封装部分。

始终建议在 css 层次结构中也使用您自己的类，这样样式就不会溢出组件的一侧。见下文：

::ng-deep .mat-datepicker-content .mat-calendar .your-custom-class{
    width: 100px !important;
    height: 100px !important;
}

【讨论】：