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

Posted 2023-05-07

【中文标题】Angular Kendo Grid：所选行的背景颜色

【英文标题】：Angular Kendo Grid: Background Color of Selected Row

【发布时间】：2021-07-20 12:09:02

【问题描述】：

如何更改选中的 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

【问题讨论】：

主机 ng deep 也不起作用

ng-deep 应该可以完成这项工作.. 如果没有，您可以检查是否在

中添加了 [selectable]="true"

您要么必须禁用视图封装，要么在全局 styles.css 文件中声明这些覆盖以使其工作

【参考方案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的信息。

【讨论】：

忘了提到主机 ng deep 对我也不起作用

网格是您放置样式的组件的直接子级吗？