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

Question

我有一个页面，我想使用此Angular Form字段：

<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>

现在，请注意appearance="outline"中的mat-form-field是新的，因为我不知道哪个版本，但它是新的。

因此，这会创建带边框的漂亮白色表单，但我们希望在表单上使用较暗的背景，以便用户专注于白色输入（For 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;
  }
}