Vaadin TreeGrid行级样式问题：如何使用LumoUtility的bg-error类？

Vaadin TreeGrid的行元素默认不会直接识别Lumo的bg-error这类通用背景样式类，原因是TreeGrid的行与单元格有自身的样式层级，通用Lumo类的优先级不足以覆盖默认样式。可以通过以下两种方式解决：

方式一：自定义样式类复用Lumo颜色变量 #

在项目的全局样式文件（如styles.css或主题目录下的CSS文件）中添加自定义类，直接引用Lumo的错误色变量：

.bg-error-row {
  background-color: var(--lumo-error-color);
  color: var(--lumo-error-text-color); /* 同时设置文本色保证可读性 */
}

然后修改Java代码中的类名生成器：

TreeGrid<POJO> grid = new TreeGrid<>(POJO.class); 
grid.setClassNameGenerator(pojo -> {
    return "bg-error-row";
});

方式二：增强bg-error类的样式优先级 #

如果想直接使用Lumo原生的bg-error类，需要在样式文件中针对TreeGrid的行元素提升该类的样式优先级：

vaadin-tree-grid-row.bg-error td {
  background-color: var(--lumo-error-color);
  color: var(--lumo-error-text-color);
}

这样原有的Java代码无需修改，bg-error类就能正确作用到TreeGrid的行单元格上。

注意：如果使用Vaadin 14+的主题自定义机制，确保样式文件被正确引入到主题配置中，保证样式能被加载。

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