自定义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 Material Model Component中使用了Datepicker。

请帮忙。

Answer 1

有两种方法可以应用此CSS

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

要么

2. 在样式代码之前添加:: ng-deep：

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