如何用CSS实现RadzenDataGrid行鼠标悬停变色效果

问题背景 #

需要为RadzenDataGrid设置整行鼠标悬停颜色，初期尝试多种CSS规则均未生效，仅能实现偶数行单个单元格的悬停变色，最终发现开启AllowAlternatingRows="true"是导致问题的核心原因。

无效尝试记录 #

1. 直接定位.rz-data-row:hover设置背景色，无效果：

.rz-data-row:hover 
{
background-color: #767676 !important;
}

2. 修改单元格悬停选择器为行选择器，无效：

.rz-grid-table-striped tbody tr:not(.rz-expanded-row-content):nth-child(even) > tr:hover{
background-color: orange !important;
}

3. 使用错误类名.rz-grid-table-stripped（正确拼写为striped）设置交替行表格的悬停样式，无效果：

rz-data-grid .rz-grid-table-stripped tbody tr:hover {
  background-color: orange !important;
  color: white !important;
}

阶段性有效方案（无交替行场景） #

在未开启交替行的RadzenDataGrid中，以下CSS可实现整行悬停效果：

.rz-data-grid .rz-grid-table tbody tr:hover {
  background-color: orange !important;
  color: white !important;
}

最终解决方案（开启AlternatingRows场景） #

若仅需奇数行（无默认底色的行）在鼠标悬停时高亮，使用以下CSS规则：

.rz-grid-table-striped tbody > tr:nth-child(odd):hover > td {
    background-color: yellow !important; /* 可替换为自定义悬停颜色 */
}

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