如何移除Angular Material芯片(Chip)组件的默认输入框样式？

方法1：停用mat-form-field默认外观（最小改动） #

给<mat-form-field>添加appearance="none"属性，会直接移除Material自带的外框、下划线、内边距等默认表单样式，你可以直接在容器上自定义样式：

<mat-form-field class="example-chip-list" appearance="none">
  <!-- 原有的mat-chip-list、input、autocomplete代码保持不变即可 -->
</mat-form-field>

之后你可以直接给.example-chip-list和内部input写自定义CSS，完全覆盖原有样式。如果组件内样式不生效，可以加::ng-deep前缀，或者将组件的ViewEncapsulation设置为None。

方法2：完全移除mat-form-field包装（彻底自定义） #

mat-chip-list的输入绑定逻辑不依赖mat-form-field容器，你可以直接用自定义的容器代替mat-form-field，彻底摆脱Material默认表单样式：

<!-- 自定义容器，所有样式完全自主控制 -->
<div class="custom-chip-container">
  <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>
</div>

你只需要给.custom-chip-container写你需要的边框、背景、内边距等样式即可，完全和表单其他输入框风格对齐。

注意事项 #

• 不要删除input上的matChipInputFor、matAutocomplete等功能属性，这些是多选、自动补全功能正常运行的必要逻辑，和样式无关
• 如果自动补全的下拉面板样式也需要调整，可以给<mat-autocomplete>添加panelClass="custom-autocomplete-panel"属性，自定义下拉面板的样式

内容的提问来源于stack exchange，提问作者Robinhood