如何更改 mat-mdc-form-field外观=“outline”的背景颜色

Question

由于某种原因，无法找到如何在表单字段概述时覆盖背景颜色的工作示例，所有示例都适用于填充

Answer 1

控件始终是透明的，因为您可能会从浅色和深色模式切换，因此您需要的只是一个自定义 CSS，它设置背景颜色以达到所需的效果。

SCSS：

.custom-background .mat-mdc-text-field-wrapper {
  background-color: azure;
}

HTML：

<p>
  <mat-form-field appearance="outline" class="custom-background">
    <mat-label>Outline form field</mat-label>
    <input matInput placeholder="Placeholder" />
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    <mat-hint>Hint</mat-hint>
  </mat-form-field>
</p>

Stackblitz 演示