Angular Kendo 网格：所选行的背景颜色

Question

如何更改选中的 Kendo Angular 网格行的背景颜色？以下是不使背景颜色为蓝色。试图弄清楚是什么压倒了它。

.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-deep here。