javascript - 如何使用较暗的背景并使 Angular Material Form Field 组件具有白色背景？

Question

我有一个页面，我想在其中使用这个 Angular Form Field:

<mat-form-field appearance="outline">
    <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>

现在，注意 mat-form-field 中的 appearance="outline" 是从哪个版本开始新的，我不知道，但它是新的.

因此，这创建了这些漂亮的带边框的白色表单，但我们想在表单上使用较暗的背景，以便用户专注于白色输入(对于 UX)。

当我们将这些表单字段放入 div 时会发生什么，我们可以将 div 设置为 #fbfbfb 背景，但表单字段采用相同的颜色，因此基本上它们是透明的。我们试图找到一个特定的类或元素，我们可以将背景颜色或颜色设置为白色，但没有成功。

如何在稍暗的背景上实现白色输入？

Answer 1

您需要添加背景颜色的类名为mat-form-field-outline。您还需要添加一个 5px 的边框半径，以使其与字段轮廓相匹配。像这样的东西:

<mat-form-field class="opaque-form-field">...

.opaque-form-field {
  /deep/ .mat-form-field-outline {
    background-color: #fff;
    border-radius: 5px;
  }
}