自定义Angular 6的Angular Material Datepicker大小

Question

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

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

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

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

我在Angular材质模型组件中使用了Datepicker。

请帮助。

Answer 1

有两种方法可以应用此CSS

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

OR

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

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

Answer 2

要对内置的CSS类进行编辑，必须使用::ng-deep，如下所示。

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

请注意，它仅适用于特定的封装。参见下面来自official site的评论。

  

仅在模拟视图封装中使用/ deep /，>>>和:: ng-deep。   默认是最常用的视图封装。对于   有关更多信息，请参见“控制视图封装”部分。

始终建议在CSS层次结构中也使用您自己的类，以免样式流失到组件的一边。见下文：

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