Angular Kendo Grid：所选行的背景颜色

Question

如何更改选中的 Kendo Angular Grid 行的背景颜色？以下不是使背景颜色变蓝。试图弄清楚是什么覆盖了它。

.k-grid .k-state-selected  {
  background-color: blue !important;
  color: green;
}
 
.k-grid .k-alt.k-state-selected {
  background-color: blue !important;
  color: green;
}

资源： https://www.telerik.com/forums/changing-color-of-selected-row

Answer 1

由于视图封装，您的样式不会影响网格。你可以阅读更多关于它的信息here。

要强制将自定义样式用于具有视图封装的子组件（所有组件默认设置为 Emulated），请在 CSS 选择器之前添加 ::ng-deep，如下所示：

:host ::ng-deep .k-grid .k-state-selected  {
    background-color: blue !important;
    color: green;
}
  
:host ::ng-deep .k-grid .k-alt.k-state-selected {
    background-color: blue !important;
    color: green;
}

由于::ng-deep将样式转换为全局规则，因此需要在其前面添加:host，这样它只会影响当前组件及其子组件。

请注意，::ng-deep 已弃用，在技术上不应使用。计划进行替换，::ng-deep 可能会一直存在，直到他们想出其他东西。

你可以阅读更多关于::ng-deephere的信息。