Как использовать более темный фон и сохранить компоненты поля формы углового материала белым фоном?

Question

У меня есть страница, на которой я хотел бы использовать это поле угловой формы:

<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, но поля формы принимают один и тот же цвет, поэтому в основном они прозрачны. Мы попытались найти определенный класс или элемент, для которого мы можем установить либо цвет фона, либо цвет на белый, но безуспешно.

Как я могу добиться белого ввода поверх слегка темного фона?

Answer 1

Класс, к которому нужно добавить цвет фона, называется mat-form-field-outline.Вам также нужно будет добавить радиус рамки 5 пикселей, чтобы он соответствовал контуру поля.Что-то вроде:

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

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