input rendering problem using mat form field from Angular Material

Question

I am creating a login form for my application, and using the mat-form-field component for my inputs, but when I open the login page I notice that the input does not appear in the correct way, it appears without any style, as if it were not part of the Angular Material[image 1], it only renders the style when I click on the input[image 2], has anyone seen this? I have other angular applications using this component and I have never had this problem, as soon as the page opens the input field already appears in the correct format

image 1 image 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]
    })
  }

}

as I said I have other applications that when opening the /login page the form already appears in the expected format [image 3] , performing some more tests after I click on the two inputs that are apparently with the broken style, they simply disappear when they are unchecked [image 4], I believe that the error is not in the .scss file but I will leave it here

image 3 image 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 { }