Angular 角度输入预期行为不同

matInput字段行为不符合预期。在他们的网站上，当点击matInput时，占位符文本浮在顶部

此外，没有材质样式应用于垫卡，它只是看起来像一张普通卡

我在网上找到了一些解决方案：

将材质css导入全局css文件。（不起作用）

已尝试更新和重新安装材料。（不起作用）

从这个在线示例复制了完全相同的代码：（不起作用）

尝试将样式表添加到index.html（无效）

更新的angular.json文件（不起作用）

---

共享你的module.ts文件。添加app.module.ts文件请检查。这很奇怪。你能告诉我你遇到了什么错误吗？试着清理npm缓存，新项目运行良好。另外，我在旧项目上运行了“npmcacheclean--force”命令，它按预期工作。我不知道缓存会产生这样的问题。谢谢你帮助我：）

<div fxLayout="column" style="height: 100%; width: 100%;" fxLayoutAlign="center center" fxLayoutGap = "20px" class="overlay">
  <img src="https://www.pngkey.com/png/detail/892-8928473_document-logo-rsum.png" width="10%">
  <h2>Login</h2>
  <mat-card>
    <mat-form-field>
      <input matInput placeholder="Enter Email">
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Enter Password">
    </mat-form-field>
  </mat-card>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import {MatButtonModule} from '@angular/material/button';
import {MatToolbarModule} from '@angular/material/toolbar';
import { FlexLayoutModule } from '@angular/flex-layout';
import {MatMenuModule} from '@angular/material/menu';
import {MatInputModule} from '@angular/material/input';
import {MatIconModule} from '@angular/material/icon'
import {MatCardModule} from '@angular/material/card';
import {MatFormFieldModule} from '@angular/material/form-field';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CommonModule,
    MatButtonModule,
    MatToolbarModule,   
    FlexLayoutModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatInputModule,
    MatFormFieldModule,
   
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }