In Angular 18 CSS is not applied on mat-form-field and other controls

I'm using Angular 18 and Angular Material dialog box. When I open the angular material dialog box there CSS is not applied on Form-fields. They looks normal html components but when I click on text box then CSS is applied. All necessary modules are imported but still CSS is not appliend. As shown in image

After I click on any text box on the form CSS is applied. as given in below image: enter image description here

HTML Code is given below:

<h2 mat-dialog-title>Add Bank Branch</h2>
<form>
<div class="content">
<mat-dialog-content>
<div class="row-cols-1">
<mat-form-field appearance="outline">
<mat-label>Branch Address</mat-label>
<input name="BranchAddress" matInput formControlName="BranchAddress"/>
</mat-form-field>
</div>
<mat-form-field appearance="outline">
<mat-label>IFSC Code</mat-label>
<input name="IFSCCode" matInput formControlName="IFSCCode" />
</mat-form-field>

<mat-form-field>
<mat-label>MICR Code</mat-label>
<input name="MICRCode" matInput formControlName="MICRCode" />
</mat-form-field>
</mat-dialog-content>
</div>
<mat-dialog-actions>
<button mat-button type="button">No Thanks</button>
<button style="padding-left: 10px"
color="primary"
mat-raised-button
mat-button
type="submit"
cdkFocusInitial >
<mat-icon>add_circle</mat-icon>
Save
</button>
</mat-dialog-actions>
</form>


TS code :>>>>>

import { CommonModule } from '@angular/common';
import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from
'@angular/forms';
import { MatButtonModule, MatIconButton } from '@angular/material/button';
import { MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle } from
'@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIcon } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';

@Component({
selector: 'app-add-branch',
standalone: true,
imports: [MatFormFieldModule,
MatInputModule,
FormsModule,
MatButtonModule,
MatDialogTitle,
MatDialogContent,
MatDialogActions,
MatDialogClose,
ReactiveFormsModule,
MatIcon,
MatIconButton
],
templateUrl: './add-branch.component.html',
styleUrl: './add-branch.component.css'
})
export class AddBranchComponent implements OnInit {

branchForm!: FormGroup;
constructor(private _fb: FormBuilder) {}
ngOnInit(): void {
this.branchForm = this._fb.group({
BranchAddress: this._fb.control('', [Validators.required,
Validators.maxLength(50)]),
IFSCCode: this._fb.control('', [Validators.required, Validators.maxLength(10)]),
MICRCode: this._fb.control('', [Validators.required, Validators.maxLength(10)])
});
}
AddNewBranch() {

}
}

Continue reading...