如何自动告诉Angular从父级获取拖放样式

Question

我正在尝试使用Angulars拖放CDK功能。我只有一个问题，它涉及列表的材料样式。我试图创建一个看起来像这样的列表：

但是只要我将其拖动，我就会得到：

我找不到有关如何复制所有样式1：1的任何信息。

如果我需要手动设置样式，什么是获得我需要的所有样式的最佳方法？手动复制浏览器告诉我的元素具有的样式无济于事。这非常耗时，我也没有成功。

该列表的代码如下所示：

<mat-list cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<h3 mat-subheader>List</h3>
<div class="list-content">
    <mat-list-item *ngFor="let favourite of favourites" cdkDrag class="example-box">
      <mat-icon mat-list-icon><img style="width: 28px; border-radius: 14px;" src="https://example.com/img/profileicon/{{favourite.profileIconId}}.png"></mat-icon>
      <h4 mat-line>{{favourite.name}}</h4>
      <p mat-line>{{favourite.informationText}}</p>
      <button mat-icon-button>
          <mat-icon style="color: red;">fiber_manual_record</mat-icon>
      </button>
      <button mat-icon-button routerLink="/profile/{{favourite.name}}">
          <mat-icon>send</mat-icon>
      </button>
    </mat-list-item>
    <h4 class="center" mat-line *ngIf="favourites === null || favourites.length <= 0">Add favorites to see them here.</h4>
</div>

在此列表中，您确实可以看到自己喜欢的人，并且应该可以使用拖放功能对他们进行排序。

我希望使用默认的棱角材质样式，而不是常规的默认样式。