如何自定义@angular-material-components/datetime-picker宽度？

Question

我正在为日期选择器使用@angular-material-components/datetime-picker 库。我使用 hideTime 来显示日期选择器。简化代码如下。

<mat-form-field>
    <input matInput [ngxMatDatetimePicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <ngx-mat-datetime-picker #picker hideTime="true">
    </ngx-mat-datetime-picker>
</mat-form-field>

结果如下

如何调整此日期选择器的宽度以使突出显示的区域最小化？

我在styles.scss中尝试了下面的样式class，希望能覆盖它的默认样式，但是不行

.mat-form-field-wrapper {
  width: 150px !important;
  height: 36px !important;
}

请帮忙。谢谢

Answer 1

您需要 :host ::ng-deep 以允许访问不在组件 HTML 中的 DOM 元素并覆盖其 CSS 样式规则。

注：

Be sure to include the :host selector before ::ng-deep. If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components.

.component.css

:host ::ng-deep .mat-form-field-wrapper {
  width: 150px !important;
  height: 36px !important;
}

Sample Solution on StackBlitz

参考资料

(deprecated) /deep/, >>>, and ::ng-deep

如何自定义@angular-material-components/datetime-picker宽度？

How to customize @angular-material-components/datetime-picker width?

angular-material

datetimepicker

参考资料