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

【问题标题】：How do I use a darker background and keep the Angular Material Form Field components have a white background?如何使用较暗的背景并保持 Angular Material Form Field 组件具有白色背景？
【发布时间】：2019-02-18 19:20:49
【问题描述】：

我有一个页面，我想在其中使用这个 Angular 表单域：

<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 的背景，但表单域采用相同的颜色，因此它们基本上是透明的。我们试图找到一个可以将背景颜色或颜色设置为白色的特定类或元素，但没有成功。

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

【问题讨论】：

标签： javascript css angular angular-material material-design

【解决方案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;
  }
}

【讨论】：

你的文字是白色的吗？您使用的是深色主题吗？如果您的文本是白色的，为什么还要使用白色字段背景？
我不希望文本是白色的。你的解决方案使它变白了。我就是这么说的。很抱歉造成混乱。
我的示例代码只更改了background-color 和border-radius。你试过什么代码？

【解决方案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;
}

【讨论】：