Angular Material 18中mat-chip拖拽样式异常问题求助

方案一：修复mat-chip的CDK拖拽样式 #

CDK拖拽时会自动为元素添加cdk-drag、cdk-drag-preview、cdk-drag-placeholder等类，补充这些类的样式即可匹配自定义mat-chip的外观：

/* 基础mat-chip样式 */
mat-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  height: 32px;
  font-size: 14px;
  line-height: 32px;
  border-radius: 16px;
  border: 1px solid transparent;
  cursor: grab;
  background-color: #e0e0e0;
  margin: 4px;
  font-family: Roboto, sans-serif;
  transition: opacity 0.2s ease-in-out;
}

/* 拖拽预览的芯片样式 */
mat-chip.cdk-drag-preview {
  background-color: #e0e0e0;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  cursor: grabbing;
  height: 32px;
  padding: 0 12px;
  align-items: center;
  display: inline-flex;
}

/* 拖拽占位符样式 */
mat-chip.cdk-drag-placeholder {
  background-color: transparent;
  border: 1px dashed #ccc;
  border-radius: 16px;
  height: 32px;
  margin: 4px;
}

/* 拖拽中原始芯片的透明度 */
mat-chip.cdk-drag {
  opacity: 0.5;
}

方案二：使用mat-chip-option并禁用点击功能 #

若想避免大量自定义样式，推荐直接使用mat-chip-option，通过以下步骤禁用默认点击选中行为：

1. 给父组件mat-chip-listbox设置selectable="false"，关闭整体选择功能
2. 可选：给mat-chip-option添加点击事件阻止冒泡，彻底禁用交互

<mat-chip-listbox selectable="false">
  <mat-chip-option 
    cdkDrag 
    *ngFor="let country of brand.availableCountries"
    (click)="$event.stopPropagation()"
  >
    {{ country }}
  </mat-chip-option>
</mat-chip-listbox>

这种方式可直接复用Material的默认芯片样式，无需自定义基础样式，同时保留拖拽功能。

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