Angular中Kendo Grid选中行背景色修改问题求助

我在Angular项目中使用Kendo Grid，想要修改选中行的背景色。当前HTML代码如下：

<kendo-grid id="kendoGridId"
            [kendoGridBinding]="something"
            [loading]="loading"
            [selectedKeys]="selectedKeys"
            [selectable]="true"
            [height]="124"
            [resizable]="true"
            [sortable]="true"
            (cellClick)="onSelect($event)"
            kendoGridSelectBy="id">
...
</kendo-grid>

目前通过cellClick事件可以正常选中行，但选中后行默认显示浅蓝色，我想将其改为透明。

我已在.ts文件中添加encapsulation: ViewEncapsulation.None关闭组件封装，尝试过以下CSS样式：

:host ng-deep .k-state-selected {
    background-color: red !important;
}

但无效，也尝试过去掉:host和::ng-deep，以及添加到全局.scss文件，均无效果。不过修改行hover背景色的样式是有效的：

.k-grid tr:hover {
  background-color: white; /* Change this to your desired color */
}

想请教为何选中行的样式修改无效？

• 样式优先级不足：Kendo Grid选中行的默认样式使用了更具体的选择器（比如.k-grid tr.k-state-selected），你之前用的.k-state-selected权重不够，被默认样式覆盖了。
• 使用精确选择器覆盖：直接针对表格行的选中状态编写样式，提升选择器权重：

  .k-grid tr.k-state-selected {
      background-color: transparent !important;
      /* 可选：如果需要保留原文字颜色，添加这行 */
      color: inherit;
  }
  

  若仍无效，可结合表格ID进一步提升权重：

  #kendoGridId tr.k-state-selected {
      background-color: transparent !important;
  }
  

• 修正::ng-deep写法：你之前写的ng-deep缺少前置冒号，正确写法是::ng-deep。如果在组件样式中使用，正确代码如下：

  ::ng-deep .k-grid tr.k-state-selected {
      background-color: transparent !important;
  }
  

  注意：当已经设置ViewEncapsulation.None时，组件样式本身就是全局生效的，不需要额外加::ng-deep。
• 排查样式冲突：打开浏览器开发者工具（F12），选中已激活的选中行，在Elements面板的Styles标签中查看当前生效的背景色样式，找到优先级更高的选择器，针对性编写覆盖样式。

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