删除悬停并将颜色聚焦在角度材料 16 中的材料表单字段上？

Question

像这样的简单表格

<form [formGroup]="myForm">
    <mat-form-field class="my-light-field">
      <mat-label>Name</mat-label>
      <input matInput type="text" [value]="myObj?.name" required readonly/>
    </mat-form-field>
</form>

我喜欢让现场变得透明

.my-light-field {
  .mdc-text-field--filled{
    background-color: transparent !important;
  }
}

盘旋在田野上空时，天色越来越暗。是否可以删除悬停效果？还有对焦...

Answer 1

只需在 中添加以下 CSS styles.scss：

// Manipulate initial background color
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: transparent;
}

// Manipulate background color on hover and focus
.mat-mdc-form-field-focus-overlay {
  background-color: transparent;
}

观看现场演示。

注意：如果上面的代码不适合您，请添加!important.