使用 Angular Material 的 mat 表单字段输入渲染问题

问：

我正在为我的应用程序创建一个登录表单，并使用 mat-form-field 组件进行输入，但是当我打开登录页面时，我注意到输入没有以正确的方式显示，它没有任何样式，就好像它不是 Angular Material 的一部分[图 1]，它仅在我单击输入时呈现样式[图 2]， 有人看过这个吗？我有其他使用此组件的 angular 应用程序，但我从来没有遇到过这个问题，一旦页面打开，输入字段就已经以正确的格式出现

图像 1 图像 2

.html

                <mat-card-content>
                    <mat-form-field appearance="outline">
                        <mat-label>E-mail</mat-label>
                        <input matInput formControlName="email" type="email" placeholder="Digite seu e-mail">
                    </mat-form-field>
                    <mat-form-field appearance="outline">
                        <mat-label>Senha</mat-label>
                        <input matInput formControlName="email" type="password" placeholder="Digite sua senha">
                    </mat-form-field>
                </mat-card-content>

.ts

export class LoginComponent implements OnInit{

  loginForm!: FormGroup;
  
  constructor(
    private formBuilder: FormBuilder
  ) {

  }
  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      email: [null, [Validators.required, Validators.email]],
      senha: [null, Validators.required]
    })
  }

}

正如我所说，我还有其他应用程序，当打开 /login 页面时，表单已经以预期的格式出现 [图 3] ，在我单击显然具有损坏样式的两个输入后执行更多测试，它们在未选中时会消失 [图 4]，我相信错误不在 .scss 文件中，但我会把它留在这里

图像 3 图像 4

.scss 域名

.login-component {
  max-width: 50%;
  min-height: 78.7%;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  margin: 0 auto;

  .login {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 68px;
    background-color: white;
  }

  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .form-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;

    mat-card-header {
      margin-bottom: 24px;

      mat-card-title {
        font-size: 32px;
        font-weight: 400;
      }
    }

    mat-card-content {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    mat-card-actions {
      display: flex;
      flex-direction: column;
      align-items: normal;

      button {
        margin: 0 8px;
        margin-bottom: 16px;
      }
    }

    p {
      font-size: 16px;
      font-weight: 500;
    }

    a {
      cursor: pointer;

      &:active {
        color: #551A8B;
      }
    }
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { RouterModule } from '@angular/router';
import { GoogleMapsModule } from '@angular/google-maps';
import { MatInputModule } from '@angular/material/input';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/header/header.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdbAccordionModule } from 'mdb-angular-ui-kit/accordion';
import { MdbCarouselModule } from 'mdb-angular-ui-kit/carousel';
import { MdbCheckboxModule } from 'mdb-angular-ui-kit/checkbox';
import { MdbCollapseModule } from 'mdb-angular-ui-kit/collapse';
import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown';
import { MdbFormsModule } from 'mdb-angular-ui-kit/forms';
import { MdbModalModule } from 'mdb-angular-ui-kit/modal';
import { MdbPopoverModule } from 'mdb-angular-ui-kit/popover';
import { MdbRadioModule } from 'mdb-angular-ui-kit/radio';
import { MdbRangeModule } from 'mdb-angular-ui-kit/range';
import { MdbRippleModule } from 'mdb-angular-ui-kit/ripple';
import { MdbScrollspyModule } from 'mdb-angular-ui-kit/scrollspy';
import { MdbTabsModule } from 'mdb-angular-ui-kit/tabs';
import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';
import { MdbValidationModule } from 'mdb-angular-ui-kit/validation';
import { FooterComponent } from './shared/footer/footer.component';
import { ContainerComponent } from './shared/container/container.component';
import { HomepageComponent } from './pages/homepage/homepage.component';
import { LoginComponent } from './pages/login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    ContainerComponent,
    HomepageComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatButtonModule,
    MatToolbarModule,
    MdbAccordionModule,
    MdbCarouselModule,
    MdbCheckboxModule,
    MdbCollapseModule,
    MdbDropdownModule,
    MdbFormsModule,
    MdbModalModule,
    MdbPopoverModule,
    MdbRadioModule,
    MdbRangeModule,
    MdbRippleModule,
    MdbScrollspyModule,
    MdbTabsModule,
    MdbTooltipModule,
    MdbValidationModule,
    RouterModule,
    GoogleMapsModule,
    AppRoutingModule,
    MatInputModule,
    ReactiveFormsModule,
    FormsModule,
    MatCardModule,
    MatFormFieldModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }