Angular 4 Material 2 从输入控件中删除占位符上标和错误下标空间答案

【问题标题】：Angular 4 Material 2 Remove placeholder superscript and error subscript space from input controlsAngular 4 Material 2 从输入控件中删除占位符上标和错误下标空间
【发布时间】：2018-03-22 15:56:58
【问题描述】：

我目前正在尝试在材质样式表中使用角材质中的一些组件。我遇到的问题是，即使我可以 floatPlaceholder="never" 和 shouldPlaceholderFloat="false"，控件上方的空间仍然被占位符占用。位于输入行下方的错误文本也是如此。

我想要一个一致的行高，因此不希望占位符空间或错误行空间被占用。但是我确实想要单击控件时下划线突出显示的行为（如果您将控件从表单字段中取出，则不会得到。）

我怎样才能摆脱或隐藏这个空间？

代码如下：

<form>

  <div style='background-color:lightblue'>

    <mat-form-field style='background-color:lightgreen' floatPlaceholder="never" shouldPlaceholderFloat="false">
      <mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <p> Selected value: {{selectedValue}} </p>
  </div>
</form>

我提供了一个 plunker here。

【问题讨论】：

您可以通过覆盖样式类以及使用 ViewEncapsulation.None 来做到这一点，但是，这将违反 Material Design 原则。
我尝试了一个 css 解决方案，但无法让它覆盖正确的样式。（是的，我知道我可能违反了这些原则，但在这种情况下我需要它，因为它所在的控件有其自身的局限性。）
好吧，原来我的问题不在于 ViewEncapsulation.None。之后，我可以修改样式 - Angular 正在剥离我的样式。

标签： css angular angular-material2

【解决方案1】：

这对我有用（材料版本 5）

在您的组件中将材质类覆盖为：

.mat-form-field-infix {
    border-top: 0 solid transparent !important;
}
.mat-form-field-wrapper {
    padding-bottom: 0 !important;
}
.mat-form-field-underline {
    bottom: 0 !important;
}

您可能希望将floatLabel="never" 添加到您的mat-form-field 元素中，以禁止您的占位符也悬停在您的输入上方。

【讨论】：