Angular 自定义角度6的角度材质日期选择器大小

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

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

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

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

我在角材料模型组件中使用了Datepicker

---

请提供帮助。

有两种方法可以应用此css

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

或

在样式代码之前添加：：ng deep 例：

---

有两种方法可以应用此css

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

或

在样式代码之前添加：：ng deep 例：

---

要在build css类中对材质进行编辑，必须使用如下所示的

：：ng deep

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

请注意，它只适用于特定的封装。请参阅下面的评论

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

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

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

---

要在build css类中对材质进行编辑，必须使用如下所示的

：：ng deep

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

请注意，它只适用于特定的封装。请参阅下面的评论

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

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

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

---

尝试将它放入：host:：ng deep{}尝试将它放入：host:：ng deep{}