如何从 Angular 材料芯片中删除材料输入样式？

Question

我正在使用材料芯片在我的一种形式中提供多选功能。

  <mat-form-field class="example-chip-list">
   <mat-chip-list #chipList>
    <mat-chip *ngFor="let fruit of fruits;let indx=index;" [selectable]="selectable" [removable]="removable" (removed)="remove(fruit,indx)">
         {{fruit.name}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input placeholder="Enter business categories" #fruitInput [formControl]="fruitCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur">
   </mat-chip-list>
   <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
     <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
         {{fruit.name}}
     </mat-option>
   </mat-autocomplete>
  </mat-form-field>

我面临的问题是输入字段中的材料样式。

此材料输入字段会干扰表单的外观和感觉。如何使用自定义输入字段代替材料输入？

Answer 1

mat-form-field 有一个属性叫做外观

改成：

<mat-form-field class="example-chip-list" appearance="fill">

并使用css去除下划线

::ng-deep .mat-form-field-underline {
  display: none;
}