如何自定义Angular CDK拖拽模式下的样式？——解决mat-checkbox在.cdk-drag-preview中样式不生效问题

这个问题我之前也碰到过，核心原因是**cdk-drag-preview是Angular CDK克隆出来的独立元素**，你原来的样式穿透是针对原始.item-box里的Mat-Checkbox，没有覆盖到预览容器内的克隆元素。下面是具体的解决方法：

原因分析 #

当你触发拖拽时，CDK会创建一个原始元素的克隆体，并添加.cdk-drag-preview类作为外层容器。你原来的:host ::ng-deep .item-box mat-checkbox选择器只会匹配原始列表中的复选框，不会作用到预览克隆体里的复选框，所以样式不生效。

解决方案 #

调整样式选择器，让样式穿透覆盖到.cdk-drag-preview内部的Mat-Checkbox元素：

1. 添加针对预览状态的Checkbox样式 #

在你的CSS文件中新增以下代码（可以根据你的需求修改颜色、边框等属性）：

/* 修改预览状态下Checkbox的边框颜色 */
:host ::ng-deep .cdk-drag-preview .item-box mat-checkbox label.mat-checkbox-layout span.mat-checkbox-inner-container .mat-checkbox-frame {
  border-color: #ffffff;
}

/* 修改预览状态下Checkbox选中时的背景色 */
:host ::ng-deep .cdk-drag-preview .item-box .mat-checkbox-checked.mat-accent .mat-checkbox-background, 
.cdk-drag-preview .item-box .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: transparent;
}

/* 修改预览状态下Checkbox的文字颜色（如果需要） */
:host ::ng-deep .cdk-drag-preview .item-box mat-checkbox label.mat-checkbox-layout span.mat-checkbox-label span {
  color: #ffffff;
}

2. 统一预览容器的整体样式 #

如果你希望预览元素的整体外观和原始元素一致，可以在.cdk-drag-preview中补充背景色等属性：

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  /* 新增：和原始.item-box一致的背景色 */
  background-color: #9594947a;
  /* 确保文字颜色继承 */
  color: #ffffff;
}

修改后的完整CSS示例 #

把上述代码整合到你的现有CSS中，最终代码大概是这样：

.drag-container { display: inline-block; vertical-align: top; max-width: 100%; width: 400px; }
.item-list { display: block; }
.item-box { display: flex; font-size: 14px; color: #ffffff; background-color: #9594947a; border: 1px solid #9594947a; border-radius: 4px; margin-bottom: 5px; flex-direction: row; align-items: center; justify-content: space-between; box-sizing: border-box; cursor: move; }

/* 调整预览容器样式 */
.cdk-drag-preview { 
  box-sizing: border-box; 
  border-radius: 4px; 
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  background-color: #9594947a;
  color: #ffffff;
}

.cdk-drag-placeholder { opacity: 0; }
.cdk-drag-animating { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); }
.item-list.cdk-drop-list-dragging .item-box:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); }

/* 原始元素的Checkbox样式 */
:host ::ng-deep .item-box mat-checkbox label.mat-checkbox-layout { margin-left: 5px; margin-bottom: 1px; }
:host ::ng-deep .item-box mat-checkbox label.mat-checkbox-layout span.mat-checkbox-label span { cursor: move; }
:host ::ng-deep .item-box mat-checkbox label.mat-checkbox-layout span.mat-checkbox-inner-container .mat-checkbox-frame { border-color: #e1dfdf; }
:host ::ng-deep .item-box mat-checkbox label.mat-checkbox-layout span.mat-checkbox-inner-container .mat-checkbox-ripple .mat-ripple-element { background-color: transparent; }
:host ::ng-deep .item-box .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { background-color: transparent; }

/* 预览状态下的Checkbox样式 */
:host ::ng-deep .cdk-drag-preview .item-box mat-checkbox label.mat-checkbox-layout span.mat-checkbox-inner-container .mat-checkbox-frame {
  border-color: #ffffff;
}

:host ::ng-deep .cdk-drag-preview .item-box .mat-checkbox-checked.mat-accent .mat-checkbox-background, 
.cdk-drag-preview .item-box .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: transparent;
}

这样修改后，拖拽预览状态下的Mat-Checkbox样式就会正常生效了。

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