Vaadin Grid Drag&Drop 更改放置目标突出显示颜色

Vaadin Grid Drag&Drop change drop target highlighting color

我需要更改 Vaadin 14 Grid 中可能放置目标的突出显示颜色。为了说明,我正在使用“介于”之间的放置模式,这会产生一条紫色的线:

如何更改紫色线条的颜色?

Vaadin教程不易理解,建议using a CSS selector ending with -drag-center (Vaadin 8) or using .v-drag-over-target.card selector。但这似乎不起作用,也许我需要用其他东西替换第二个建议中的“v”?

由于紫色,我假设您使用的是 Material 主题。我还假设您设置了自定义主题,如 here 所述。如果没有,该页面将说明如何设置自定义主题。

自定义网格行拖动指示器的颜色:

  • 在您的项目文件夹中,创建一个文件frontend/themes/<your-custom-theme-name>/components/vaadin-grid.css
  • 将以下内容添加到 CSS 文件中:
[part~='row'][dragover] [part~='cell']::after {
    background: green; /* replace with the color you want */
}