Applying Custom CSS

Environment

Description

The applied custom styles don't take effect. How to apply custom styles to any Kendo UI for Angular component?

Solution

To customize the appearance of any Kendo UI for Angular component, apply custom CSS rules by using the available DOM class selectors.

The custom CSS rules will take effect if:

• They are set globally in the project. For example, in the project root styles.css file.
• The encapsulation property is set to ViewEncapsulation.None for the specific component where the custom styles are used.

If you have multiple components of the same type on the same page, but you want to target only a single one, refer to the knowledge base article on applying custom CSS only for a single component.