Vaadin v23：满足条件时修改行背景色（内置样式）失效问题

为啥会这样？ #

1. 没导入Lumo工具类的样式文件
   你用的LumoUtility.Background.CONTRAST对应CSS类是bg-contrast，这个类的样式定义在@vaadin/vaadin-lumo-styles/utilities.css里。如果项目没导入这个文件，浏览器根本找不到这个类的样式规则，加了也白加。而你自己写的grid-row-removed类是在自定义CSS里定义的，所以能生效。

2. 样式优先级不够
   就算导入了工具类，Grid行（vaadin-grid-row）本身有默认的背景样式，bg-contrast这种通用工具类的选择器权重不如Grid内置样式高，盖不过默认的背景色。

怎么搞定？ #

1. 先导入Lumo工具类样式 #

在项目全局的styles.css里加这么一行：

@import "@vaadin/vaadin-lumo-styles/utilities.css";

2. 给Lumo工具类提权 #

如果导入后还是不行，就在自定义CSS里写个更具体的选择器，让bg-contrast能覆盖Grid行的默认样式：

vaadin-grid vaadin-grid-row.bg-contrast {
  background-color: var(--lumo-contrast-color);
}

3. 换个方式：直接用Lumo变量 #

不想折腾工具类的话，也可以自定义类，然后用Lumo的内置颜色变量，效果一样：

grid.setClassNameGenerator(row -> row.getRemoved() ? "grid-row-removed" : "");

.grid-row-removed {
  background-color: var(--lumo-contrast-color);
}

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