Vaadin 24动态修改Grid行样式无效问题排查

问题描述 #

我希望在Grid中，当记录的archived标记被设置时，修改该行的文本颜色。为此遵循了Vaadin官方文档指导，现有代码如下：

Java代码 #

private final Grid<JobState> grid = new Grid<>(JobState.class, false);
// 添加若干列
grid.setPartNameGenerator(jobState -> {
   if(jobState.isArchived()) {
        return "archive";
   }
   return null;
});

CSS代码 #

vaadin-grid.styling::part(archive) {
    color: blueviolet;
}

CSS文件位于正常工作的自定义主题中，断点验证PartGenerator逻辑符合预期，但样式从未在前端生效，Vaadin版本为24.3.5。

解决方案 #

• 给Grid添加指定类名
  你的CSS选择器使用了vaadin-grid.styling，但Java代码中未给Grid添加该类名，需补充：

  grid.addClassName("styling");
  

• 修正样式优先级与目标元素
  Vaadin Grid的单元格文本由vaadin-grid-cell-content元素承载，默认样式优先级高于行的part样式，需调整CSS选择器指向单元格内容：

  vaadin-grid.styling::part(archive) vaadin-grid-cell-content {
      color: blueviolet;
  }
  

完成以上两步后，归档行的文本颜色即可正常生效。

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