Angular Material 形成背景颜色

Question

我是 Angular 和 Angular Material 方面的新手。我正在创建一个表单并想更改背景颜色，例如更改为红色。

但不是简单地改变背景颜色，而是红色覆盖了表单。

<form class="example-form" style="background-color:red">
  <mat-form-field class="example-full-width">
    <mat-label>Favorite food</mat-label>
    <input matInput placeholder="Ex. Pizza" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder="Ex. It makes me feel..."></textarea>
  </mat-form-field>
</form>

这是一个关于 stackblitz 的例子:Example

谁能告诉我，设置背景颜色的正确方法是什么？

谢谢!

Answer 1

元素的默认颜色是 rgba(0, 0, 0, 0.04)。那是黑色，透明度为 96%。在白色背景上，它类似于 rgb(245, 245, 245)。您可以添加 CSS 规则

:host ::ng-deep .mat-form-field-flex {
  background: rgb(245, 245, 245);
}

更改 div 的背景颜色并在所有背景上保持默认颜色。

参见:https://stackblitz.com/edit/angular-ka5hm7-jxen6p?file=src/app/input-overview-example.css