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

【问题标题】：How to customize @angular-material-components/datetime-picker width?如何自定义@angular-material-components/datetime-picker 宽度？
【发布时间】：2021-08-30 13:17:11
【问题描述】：

我正在使用 @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中尝试了下面的样式类，希望覆盖它的默认样式，但是不行

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

请帮忙。谢谢

【问题讨论】：

标签： angular-material datetimepicker

【解决方案1】：

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

注意：

确保在::ng-deep 之前包含:host 选择器。如果 ::ng-deep 组合器在没有 :host 伪类选择器的情况下使用，样式可以渗透到其他组件中。

.component.css

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

Sample Solution on StackBlitz

参考文献

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

【讨论】：

谢谢。它完美无缺。只是想知道我是否可以在这里扩展我关于这个 CSS 的问题。我怎样才能为包装器提供两个相似的 css，一个是窄的，一个是宽的。这样我就可以使用 ngClass 来决定我可以使用哪个 css 类。谢谢
嗨，也许您可以尝试将[ngClass] 分配给<mat-form-field> 元素。在您的 CSS 文件中，添加诸如 :host ::ng-deep .your-class .mat-form-field-wrapper { /* Styling*/ } 之类的规则。尚未对此进行测试，但希望这可以为您带来实现目标的想法。谢谢。
我稍后会在这个方向上做一个测试。谢谢