Angular Kendo Grid: Background Color of Selected Row

Question

How do I change the background color of Kendo Angular Grid row that is Selected? The following is not making the background color blue. Trying to figure out what is overriding it.

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

Resources: https://www.telerik.com/forums/changing-color-of-selected-row

Answer 1

Your styling doesn't affect the grid due to view encapsulation. You can read more about it here .

To force the use of your custom styling into a child component that has view encapsulation, which is set to Emulated by default for all components, add ::ng-deep before the CSS selector, like this:

: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;
}

Since ::ng-deep convert the styling into a global rule, you need to add :host before it so that it will affect only the current component and its children.

Note that ::ng-deep is deprecated and technically shouldn't be used. A replacement is planned and ::ng-deep will probably be around until they come up with something else.

You can read more about ::ng-deep here .