如何在vaadin-grid中实现行悬停样式？

Question

我正在尝试在vaadin-grid中实现行悬停样式，当悬停在行上时，它的样式就会改变。我的代码是

<dom-module id="grid-styles" theme-for="vaadin-grid">
    <template>
        <style>
             [part~="body-cell"] :hover {
                 background-color: beige;
            }   
        </style>
    </template>
</dom-module>

但是这段代码不能正常工作。有人能帮帮忙吗。此外，也没有关于它的文档。

PS。在以前的版本中，这是使用--vaadin-grid-body-row-hover-cell完成的。

编辑:我使用了以下代码，但它只影响单元格，而不是整个行

[part~="cell"]:hover ::slotted(vaadin-grid-cell-content) {
  background-color: beige;
}

Answer 1

这就是我是如何做到这一点的(一些样式有更深更具体的选择器)：

<dom-module id="grid-styles" theme-for="vaadin-grid">
  <template>
      <style>
        :host [part~="row"]:hover [part~="body-cell"]{
          background-color: rgba(0, 55, 108, 0.12);
        } 

        :host [part~="body-cell"] ::slotted(vaadin-grid-cell-content){
          cursor: pointer;
        }
      </style>
  </template>
</dom-module> 

Answer 2

下面的代码执行此操作

[part~="row"]:hover > [part~="body-cell"]{
background-color: beige;
}