Стиль поля формы не работает в Angular 9?

Question

Это мой app.component. html:

<form fxLayout="column" fxLayoutAlign="center center" [formGroup]="loginForm" (ngSubmit)="loginUser(loginForm.value)">
  <mat-form-field appearance="fill">
    <mat-label >Username: </mat-label>
    <input matInput formControlName="uname" />
  </mat-form-field>
  <br>
  <mat-form-field appearance="fill">
    <mat-label>Password: </mat-label>
    <input type="password" matInput formControlName="password" />
  </mat-form-field>
  <button type="submit" mat-button color="primary">Login</button>
</form>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { MatButtonModule   } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

И стиль поля формы будет таким:

и если я что-то напишу, то напишу это на теге:

Что вызывает это? Как бы я мог достичь его, чтобы он был таким, как здесь Простое поле формы: https://material.angular.io/components/form-field/overview

Answer 1

Вам необходимо импортировать Angular URL-адрес темы материала в файл CSS.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

См. этот файл StackBlitz для справки.