如何在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;
}