У ввода 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 имеет тот же цвет фона, что и фоновое css для страницы.
например. Мой фон был белым ... поэтому мои формы не были видны, потому что поля mat-form также были белыми.
Теперь я выбрал более темный цвет в качестве фона, чтобы мои поля были видны, но теперь виден только текст (он все еще белый). Изображение добавлено в результате.

Понятия не имею, какие могут быть проблемы.

Answer 1

По какой-то причине мое поле формы имеет тот же цвет фона, что и мое фоновый css для страницы.

Это нормально. Поля формы не имеют фона - они прозрачные. Что бы ни было «позади», поля формы будут определять фон.

Понятия не имею, какие могут быть проблемы.

Вы пытаетесь стилизовать различные аспекты вашего приложения и компонентов Angular Material, используя свой собственный CSS, но без использования тем. Если вы правильно разработали тематическое приложение, все цвета, включая передний план и фон, будут работать правильно. Если вы попытаетесь обойти их, например, применив собственные цвета фона к страницам, вы можете столкнуться с конфликтами и столкнуться с проблемами, подобными той, которая у вас есть.

Это звучит как будто вы хотите «темную» тему - светлый текст на темном фоне. Вы можете сделать это, применив темную тему - либо предопределенную, либо пользовательскую. Для получения дополнительной информации см. Руководство по темам: https://material.angular.io/guide/theming.

Здесь много сообщений о том, как настроить темы, включая изменение цветов переднего плана и фона.