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是新的，因为我不知道哪个版本是新版本。

因此，这将创建带有边框的漂亮的白色表单，但是我们希望在表单上使用深色背景，以便用户将注意力集中在白色输入上（对于UX）。

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

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

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

Answer 2

如果您想在mat-form-field下使用深色背景，只需将以下代码添加到CSS中：

::ng-deep mat-form-field {
  color: white!important;
}

::ng-deep mat-form-field  .mat-form-field-label {
  color: white!important;
}

::ng-deep mat-form-field .mat-form-field-underline {
  background-color: #868686!important;
}

::ng-deep mat-form-field .mat-input-element {
  caret-color: #157cfc!important;
}

::ng-deep mat-form-field .mat-form-field-ripple {
  background-color: #157cfc!important;
}

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

2 个答案: