Vaadin 14 Grid行条纹效果如何反转奇偶行背景配色？

自定义CSS未生效核心是两个选择器写法错误：

• 单元格part属性值写错：默认样式中单元格的part值为body cell（空格分隔的两个属性值），你写成了连字符形式的body-cell，选择器无法匹配到目标单元格元素
• 行元素不存在even属性：Vaadin Grid的行逻辑里，只会给奇数行追加odd属性，偶数行没有任何特殊属性标记，你写的:not([even])会命中所有行，自然无法实现奇偶行区分效果。

正确实现步骤：

1. 正常调用API启用行条纹主题变体

   grid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES);
   

2. 添加覆盖样式，注意需要将样式放到可穿透Grid组件Shadow DOM的全局共享样式文件中（Vaadin 14 通常为frontend/styles/shared-styles.html），样式逻辑为先清除偶数行的默认条纹背景，再给奇数行绑定条纹背景样式：

   /* 移除偶数行默认的条纹背景 */
   :host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="body cell"],
   :host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="details-cell"] {
     background-image: none;
     background-repeat: no-repeat;
   }
   
   /* 给奇数行添加条纹背景 */
   :host([theme~="row-stripes"]) [part~="row"][odd] [part~="body cell"],
   :host([theme~="row-stripes"]) [part~="row"][odd] [part~="details-cell"] {
     background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
     background-repeat: repeat-x;
   }
   

如果需要调整条纹的深浅，直接修改渐变中使用的透明度变量，或替换为自定义色值即可。

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