javascript - 如何在 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>