css - 显示本机输入元素的角垫输入

Question

我在使用有角材料时遇到了麻烦。我尝试在我的 app.module.ts 中重新安装角度材料并重新导入，并将需要导入的样式导入到 styles.css 中@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";，但它仍然显示为这样。

如果我错过了什么，有人可以检查我的 app.module.ts 吗？我一直被这个问题困扰。预先感谢您的帮助。

我的 app.module.ts

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { RouterModule } from "@angular/router";

import { AppRoutingModule } from "./app.routing";
import { NavbarModule } from "./shared/navbar/navbar.module";
import { FooterModule } from "./shared/footer/footer.module";
import { SidebarModule } from "./sidebar/sidebar.module";

import { AppComponent } from "./app.component";

import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
import { EmployeeCountChartComponent } from "./charts/employee-count-table/employee-count-chart/employee-count-chart.component";
import { LbdModule } from "./lbd/lbd.module";
import { ActiveSeLevelsComponent } from "./charts/employee-count-table/employee-count-chart/active-se-levels/active-se-levels.component";
import { ChartsModule } from "ng2-charts";
import { ActiveResourceByTechComponent } from "./charts/employee-count-table/employee-count-chart/active-resource-technology/active-resource-by-tech/active-resource-by-tech.component";
import { AssignedResourcesMcComponent } from "./charts/employee-count-table/employee-count-chart/assigned-resources-per-mc/assigned-resources-mc/assigned-resources-mc.component";
import { ActiveResourceSeAndTechComponent } from "./charts/employee-count-table/employee-count-chart/active-resource-SE-Tech/active-resource-se-and-tech/active-resource-se-and-tech.component";
import { AdminComponent } from "./admin/admin.component";
import { LoginComponent } from "./login/login/login.component";
import { MatTabsModule } from "@angular/material/tabs";
import { RegisterComponent } from "./register/register.component";
import { MatInputModule } from "@angular/material/input";
import { MatFormFieldModule } from "@angular/material/form-field";
import { ResourcePerAccountComponent } from "./charts/employee-count-table/employee-count-chart/assigned-resources-per-account/resource-per-account/resource-per-account.component";
import { EmployeeCountService } from "./services/employee-count.service";
import { AuthorizationService } from "./services/authorization.service";
import {MatCardModule} from '@angular/material/card';

const modules = [
  BrowserAnimationsModule,
  FormsModule,
  RouterModule,
  HttpClientModule,
  NavbarModule,
  FooterModule,
  SidebarModule,
  AppRoutingModule,
  LbdModule,
  ChartsModule,
  ReactiveFormsModule,
  BrowserAnimationsModule,
];

const materialModules = [
  MatFormFieldModule,
  MatTabsModule,
  MatInputModule,
  MatCardModule
]

const declarations = [
  AppComponent,
  AdminLayoutComponent,
  EmployeeCountChartComponent,
  ActiveSeLevelsComponent,
  ActiveResourceByTechComponent,
  AssignedResourcesMcComponent,
  ActiveResourceSeAndTechComponent,
  AdminComponent,
  LoginComponent,
  RegisterComponent,
  ResourcePerAccountComponent,
];

const services = [
  EmployeeCountService,
  AuthorizationService
]

@NgModule({
  imports: [...modules, ...materialModules],
  declarations: [...declarations],
  providers: [...services],
  bootstrap: [AppComponent],
})
export class AppModule {}

HTML

<div class="main-content">
  <div class="container-fluid">
    <div class="card">
      <div class="header">Login</div>
      <form [formGroup]="loginForm"(ngSubmit)="login()">
        <div class="login-container">
          <div class="login-content">
            <mat-form-field appearance="fill">
              <mat-label>Input</mat-label>
              <input matInput>
            </mat-form-field>
          </div>
          <div class="button-container">
            <button
              class="btn btn-primary"
              type="submit"
            >
              Login
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

标签： cssangularangular-material