angular 5 材质 - 表单字段停留在 180px

Question

我已经使用材质表单在对话框中创建了一个表单，但是尽管遵循了包括 https://material.angular.io/components/input/example 在内的众多示例，但我似乎无法让输入宽于 180 像素。

我确信这是一个非常标准的 CSS 东西，但我没有那种大脑，所以我无法找出问题所在。

有没有人有一个有效的/非平凡的例子？

这是我的：

 <h1 mat-dialog-title>{{title}}</h1>
<mat-dialog-content>
  <form novalidate #f="ngForm" class="form-full-width">
    <mat-form-field class="input-full-width">
      <input type="text" [(ngModel)]="data.name" name="name" matInput placeholder="Name">
      <mat-hint>Enter a unique name.</mat-hint>
    </mat-form-field>
    <mat-form-field class="input-full-width">
      <textarea [(ngModel)]="data.description" name="description" matInput placeholder="Description"></textarea>
      <mat-hint>You should describe the purpose/use of this thing.</mat-hint>
    </mat-form-field>
  </form>
</mat-dialog-content>

CSS：

 .form-full-width {
    min-width: 150px;
    max-width: 500px;
    width:100%;
}

.input-full-width {
    width:800px;
}

.mat-form-field.mat-form-field {
    width: auto;
}

谢谢。

原文由 Jonesie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

似乎与视图封装有关。该线程对此进行了解释： https ://github.com/angular/material2/issues/4034 但是更改组件的封装会导致各种编译失败。

这篇文章给了我正确的解决方案： https ://material.angular.io/guide/customizing-component-styles

我会将我的风格转移到全球范围内……

 .formFieldWidth480 .mat-form-field-infix {
   width: 480px;
}

在打开对话框的组件中：

 this.newDialog = this.dialog.open(NewDialogComponent,
  {
    width: '650px', height: '550px',
    data : newThing,
    panelClass : "formFieldWidth480"
  });

我希望这可以在我失去的那一天拯救别人…

原文由 Jonesie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

正如Jonesie 所说，这种行为与View Encapsulation 有关。在这种情况下 .mat-form-field-infix 将 180px 作为默认值 可能是因为这个。 auto 值让浏览器计算宽度而不是硬编码值。 !important 声明为此强制样式覆盖。

我正在使用 !important 因为它符合使用此属性的规则。 查看文档

::ng-deep .mat-form-field-infix {
    width: auto !important;
}

原文由 Ricardo Sanchez 发布，翻译遵循 CC BY-SA 4.0 许可协议