Applying Custom CSS for Single Components Only

Environment

Description

I have applied custom styles and have multiple Grid components on the same page. All Grids are affected, but I want only a single Grid to use the custom styles.

Solution

The desired component has to be targeted with a unique CSS selector.

1. Add a class to the desired Grid:

   Copy Code    <kendo-chart class="foo"></kendo-chart>

2. Target the desired Grid.

   Copy Code    .k-grid.foo { }

The following example demonstrates how to customize only the Grid with the foo class.