Hilla项目Grid组件行CSS选择器无效问题咨询

问题原因 #

Vaadin Grid（Hilla 基于 Vaadin 组件库）的行元素默认背景为透明，且单元格（cell）的背景样式会覆盖行的设置，导致直接使用 ::part(row) 或 ::part(selected-row) 设置背景色时无法直观看到效果。另外，selected-row 的样式优先级可能低于单元格的默认选中样式，进一步导致设置失效。

可行解决办法 #

1. 让单元格背景透明，透出该行的样式 #

通过将单元格的背景设为透明，让行的背景色显示出来：

vaadin-grid::part(row) {
    background-color: green;
}
vaadin-grid::part(cell) {
    background-color: transparent;
}

2. 针对行状态批量设置单元格样式 #

如果不想修改单元格默认背景，可以通过行的状态选择器，给该行下的所有单元格设置样式，模拟行样式效果：

• 普通行 hover 样式：

vaadin-grid::part(row):hover ::part(cell) {
    background-color: #e8f4fd;
}

• 选中行样式：

vaadin-grid::part(selected-row) ::part(cell) {
    background-color: green;
}

或者结合属性选择器提升优先级：

vaadin-grid vaadin-grid-row[selected] ::part(cell) {
    background-color: green;
}

3. 临时验证：提升行样式优先级 #

使用 !important 强制行样式生效（不推荐过度使用，仅用于快速验证问题）：

vaadin-grid::part(selected-row) {
    background-color: green !important;
}

额外检查：如果你的 Grid 开启了行条带化（striped），默认的条带样式可能会干扰自定义行样式，可以先关闭该属性：

<Grid striped={false} items={ingredients} ...>
  <!-- 列定义 -->
</Grid>

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