Angular Material 18 中垫片的拖放样式

Question

将我的 Angular 应用程序从版本 14 升级到版本 18 时，发生了很多变化。我对某些组件使用 Angular Material，但芯片无法像以前一样工作。

之前的 mat-chip-list 被 mat-chip-listbox 替换，并将 mat-chip-option 作为子项。

当我只需要拖放功能时，我使用：

<mat-chip-set>
    <mat-chip cdkDrag *ngFor="let country of brand.availableCountries">        
    </mat-chip>
</mat-chip-set>

最初，mat-chip 的所有样式都消失了，但我添加了下面的类，使其看起来像 mat-chip-option，但拖放样式不符合预期。

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: pointer;
 background-color: #e0e0e0;
 margin: 4px;
 //transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 font-family: Roboto, sans-serif;
}

这是原装芯片。

这是拖动时的样式。

我也尝试过，但点击选项是默认的，我无法禁用该部分。

Answer 1

可以使用

overflow: hidden

删除滚动条。

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: pointer;
 background-color: #e0e0e0;
 margin: 4px;
 //transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
 font-family: Roboto, sans-serif;
 overflow: hidden !important;
}