.cdk-drag-preview не применяет стили ⇐ CSS

[Anonymous]

Я использую cdk Drag and Drop из материала angular, но предварительный просмотр перетаскивания не работает должным образом. Я хочу, чтобы предварительный просмотр выглядел точно так же, как перетаскиваемый элемент, но предварительный просмотр показывает только текстовое содержимое элемента (без стилей).
HTML:

Код: Выделить всё

[i][/i]

{{field.name}}
{{field.displayType | titlecase }}( )



{{field.codingGroupField.creatorName}}

{{field.codingGroupField.createdOn | date: 'medium' }}

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);
}

У кого-нибудь есть идеи, почему это не сработает?

Подробнее здесь: https://stackoverflow.com/questions/644 ... ing-styles