角材料6.2.1“ mat-form-field-infix”覆盖宽度

Question

如何在不使用自定义CSS的情况下覆盖180px中的默认宽度mat-form-field-infix

              <mat-form-field fxFlex>
                <mat-select>
                  <mat-option>{{ option.test}}</mat-option>
                </mat-select>
              </mat-form-field>

              <mat-form-field fxFlex>
                <input matInput>
              </mat-form-field>

全屏输出

但是小屏幕显示水平滚动条

堆栈

"@angular/cdk": "^6.2.1",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/flex-layout": "^6.0.0-beta.16",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/material": "^6.2.1",

谢谢

Answer 1

我发现最接近的是对表单字段使用样式绑定：

 <mat-form-field appearance="outline" [style.width.px]="200">

否则，它使用的是自定义CSS的旧方法。...就像这样：

将属性class="datepicker"添加到您的<mat-form-field>中，然后在CSS中添加

.datepicker {width:200px;}

我遇到一个类似的问题，我的一个表单域大于其余表单域，这就是我要解决的问题。在https://i.imgur.com/uZldIjd.png处查看日期选择器表单字段：

Answer 2

在我的解决方案中，我使用ElementRef覆盖mat-form-field-infix的宽度：

   <mat-form-field
       #field
   </mat-form-field>

然后在组件中：

@ViewChild('field', { read: ElementRef }) field: ElementRef;

ngOnInit() {
    var el = this.field.nativeElement.querySelector('.mat-form-field-infix');
    el.style.width = 'auto';
}

我认为这完全不符合您的要求（“没有自定义CSS”）。但这也许对您有帮助。