css - .cdk-drag-preview 不应用样式

Question

我正在使用角度材料中的 cdk 拖放，但拖动预览没有按预期工作。我希望预览看起来与被拖动的元素完全一样，但预览只显示元素的文本内容（没有样式）。

HTML：

<div *ngFor="let field of fields$ | async" class="fields-list-container" cdkDrag cdkDragLockAxis="y">
            <div class="fields-name-desc-icon">
                <i class="fa fa-tag"></i>
                <div>
                    <div>{{field.name}}</div>
                    <div><em>{{field.displayType | titlecase }}</em>( )</div>
                </div>
            </div>
            <div>
                {{field.codingGroupField.creatorName}}
            </div>
            <div>{{field.codingGroupField.createdOn | date: 'medium' }}</div>
            <actions-menu [actions]="" [actionOn]=""></actions-menu>
        </div>

CSS：

.fields-list-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border: solid 1px #ccc;
        border-radius: 4px;
        cursor: move;

        .fields-name-desc-icon {
            display: flex;

            div {
                margin-left: .5rem;
            }

            div:nth-child(2) {
                font-size: 10px;
            }
        }

        .fa-tag {
            color: var(--rational-dark-blue);
        }
    }

    .cdk-drag-placeholder {
        opacity: 0;
    }
.cdk-drag-preview {
    @extend .fields-list-container;
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.draggable-list.cdk-drop-list-dragging .fields-list-container:not(.cdk-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

任何人都知道为什么这不起作用？

标签： cssangularangular-material

Answer 1

如下应用样式对我有用

.cdk-drag-preview {
  &.fields-list-container {
    // Apply custom styles you want to have 
  }
}