angular-material - 删除悬停并将颜色聚焦在角度 Material 16 中的 Material 表单字段上？

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

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

// 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;
}

请参阅live demo .

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