Angular mat-form-field 无法正常工作 - 字段内出现边框线

Question

在实现角度的材料库来制作表单字段和表单字段时，我遇到了这个不寻常的用户界面问题，在实现时，表单字段中出现一条不应该发生的线。

用户界面规范：

1. 顺风CSS
2. DaisyUI（组件库）
3. 角材料

以下是我编写的代码：

<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>

应用程序模块.ts：

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

显示内容： 这是显示的结果，正如您所看到的，表单字段内有一条红线，将该字段分为两部分

应该显示什么： 这是从官方文档中获取的图像。正如你所看到的，表单字段内没有内线

Answer 1

将其添加到您的 style.scss

.mdc-notched-outline__notch
{
  border-right: none;
}