Vaadin14 Grid拖拽功能如何修改放置目标高亮提示线颜色

当前使用Vaadin 14 Grid的between拖拽放置模式时，默认显示紫色的位置提示线，效果如下：

此前方案不生效的原因 #

• Vaadin 8的*-drag-center后缀选择器是旧版本服务端渲染组件的专属规则，Vaadin 14采用Web Component架构，相关API已完全废弃，不兼容
• Vaadin 14文档中提到的.v-drag-over-target规则是旧版Valo主题的类名前缀，Vaadin 14默认使用Lumo主题，原生Web组件的样式封装在Shadow DOM中，普通全局CSS无法直接命中，且类名前缀已改为vaadin-而非v-

操作步骤 #

步骤1：编写自定义CSS规则 #

创建专门针对vaadin-grid的样式文件（示例路径：frontend/styles/grid-drag-indicator.css），内容如下：

/* 命中拖拽触发时的行元素伪元素，也就是位置提示线 */
[part~="row"][dragover]::before {
  /* 修改为你需要的颜色，这里用红色示例 */
  background-color: #f44336 !important;
  /* 可选：调整提示线粗细 */
  height: 3px;
  /* 可选：调整提示线透明度 */
  opacity: 1;
}

步骤2：导入样式到Grid组件 #

由于Grid的样式在Shadow DOM内部，需要通过@CssImport指定样式作用于vaadin-grid组件，在你的入口类或使用拖拽Grid的视图类上添加以下注解：

@CssImport(value = "./styles/grid-drag-indicator.css", themeFor = "vaadin-grid")

如果你的项目使用自定义Lumo主题，也可以直接将上述CSS规则添加到主题目录下的components/vaadin-grid.css文件中，无需额外添加导入注解。

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