angular - 为 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 组件中使用了 Datepicker。

请帮忙。

标签： angulardatepickerangular-material

Answer 1

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

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

或者

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

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