mat-form-field输入具有与CSS定义的页面相同的背景

Question

我有以下代码：

HTML：

<form fxLayout="column" fxLayoutAlign="center center"
 [formGroup]="deleteForm" (ngSubmit)="onSubmitForm()">
    <mat-form-field color="accent"  appearance="outline">
      <input
        type="password"
        matInput
        required
        placeholder="Re-enter your password"
        formControlName="password">
      <mat-error>Please re-enter your password.</mat-error>
    </mat-form-field></button>
    <mat-spinner *ngIf="isLoading$ | async"></mat-spinner>
<button *ngIf="!(isLoading$ | async)" type="submit" mat-flat-button
 color="accent" [disabled]="deleteForm.invalid">Remove</button>

  </form>

ts文件：

this.deleteForm = new FormGroup({
      password: new FormControl('', {
        validators: [Validators.required]
      })
    });

由于某种原因，我的mat-form-field具有相同的背景色，因此页面的背景css也是如此。
例如我的背景是白色的。所以我的表格不可见，因为垫子形式的字段也是白色的。
现在我以较深的颜色作为背景，因此我的字段可见，但现在仅可见文本（仍然是白色）。图片已添加到结果中。

我不知道可能是什么问题。

Answer 1

  

由于某种原因，我的mat-form-field具有相同的背景色   页面的背景CSS。

这是正常现象。表单域没有任何背景-它们是透明的。表单字段的“后面”将决定背景。

  

我不知道可能是什么问题。

您正在尝试使用自己的CSS而不是使用主题来为应用程序和Angular Material组件的各个方面设置样式。如果您已正确设置应用程序主题，则包括前景和背景在内的所有颜色都将正常工作。例如，如果尝试通过将自己的背景色应用于页面来绕过主题设置，则可能会遇到冲突，并遇到类似问题。

听起来很像，就像您想要一个“深色”主题-深色背景上的浅色文字。您可以通过应用深色主题（预定义的主题或自定义的主题）来实现。有关更多信息，请参阅主题指南：https://material.angular.io/guide/theming。

这里有很多关于如何自定义主题的文章，包括更改前景色和背景色。