Angular Поля ввода материала прозрачные

Question

Я пытаюсь использовать Angular Поле ввода материала, но оно не отображается правильно. Вот код, который у меня есть:

app.component. html:

<div>
  <mat-form-field appearance="fill">
    <mat-label>Input</mat-label>
    <input matInput>
  </mat-form-field>
  <router-outlet></router-outlet>
</div>

app.module.ts:

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

  imports: [
    BrowserModule,
    AppRoutingModule,
    MatInputModule,
    MatFormFieldModule,
    BrowserAnimationsModule
  ]

Все, что я получаю, это белый экран, пока я не попытаюсь сфокусировать поле:

Angular CLI: 9.1.1
Node: 12.16.1
OS: linux x64

Angular: 9.1.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.1
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@angular/cdk                      9.2.1
@angular/cli                      9.1.1
@angular/material                 9.2.1
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Answer 1

Это решено, потому что я использовал тему purple-green, которая светла в темноте, и я забыл применить класс mat-app-background к body.