Angular mat-form-field not working properly - A border line appears inside the field

While implementing the angular's material library to make form fields and form fields I am getting this unsual ui issue, where when implemented, a line appears in the form field which should not happen.

UI specifications:

1. TailwindCSS
2. DaisyUI (Component library)
3. Angular Material

Following is the code that I have written:

<form
[formGroup]="UserSignUp"
(ngSubmit)="submitForm()"
id="sign-in-form"
onsubmit="return false"
novalidate
>
<div class="form-control w-full">
<label class="label">
<span class="label-text font-semibold text-lg">Email</span>
</label>
<mat-form-field appearance="outline">
<mat-label> Email </mat-label>
<input
formControlName="email"
placeholder="Enter your email..."
[(ngModel)]="obj.email"
matInput
/>
</mat-form-field>
<mat-error
class="mt-1"
*ngIf="isSubmitted && errorControl['email'].errors?.['required']"
>
Email is required
</mat-error>
<mat-error
class="mt-1"
*ngIf="isSubmitted && errorControl['email'].errors?.['pattern']"
>
Invalid Email structure
</mat-error>
</div>
<a routerLink="/dashboard">
<button class="bg-primary text-white py-3 w-full rounded-lg">
Sign Up
</button>
</a>
</form>


app.module.ts:

imports: [
BrowserModule,
AppRoutingModule,
MatIconModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatInputModule,
FormsModule,
ReactiveFormsModule,
],
providers: [],
bootstrap: [AppComponent],



What is showing: This the result that is showing, as you can see there is a red line inside the form-field deviding the field into two sections

What should be showing: This is the image taken from official docs. As you can see that there is no inner line inside the form-field

Continue reading...