New to Kendo UI for Angular? Start a free 30-day trial

Override Theme Styles

In some cases you may need to make a small change to the appearance of a component, while still using the same built-in or custom theme.

This article provides high-level guidance about the knowledge and tools required to override existing CSS styles without changing the theme's CSS file.

When your application requires a large number of CSS customizations, it may be more practical to use a different approach. In such cases, refer to the Customize Themes article.

CSS Utilities

The Kendo UI CSS Utilities offer a collection of utility classes for styling elements without writing custom CSS. By adding predefined classes, like k-rounded-full for rounded corners, you can modify the appearance of an element effortlessly.

html

<kendo-textbox class="k-rounded-full" placeholder="Username"></kendo-textbox>

These utilities are available as a standalone package that simplifies styling by eliminating the need of custom class names and complex CSS rules.

CSS Knowledge

To override an existing style, you implement another conflicting style. To make sure the new style takes precedence, it should have a higher specificity. If it has the same specificity, then the style should come later in the order of CSS rules and files on the page.

Check out the following resources for more details about CSS specificity, combinators and selectors:

MDN Documentation for CSS Specificity. You may prefer a less formal explanation.
How to easily calculate CSS Specificity.
CSS Combinators provide different ways to target an element, depending on its place in the DOM structure. Combinators are often called "selectors", which is different. Developers most commonly use descendant or child combinators, but there are many other options.

Tools

To see what CSS styles are applied to an HTML element, use the browser's developer tools. Learn more about how to use the developer tools efficiently in the following articles:

Angular CSS Encapsulation

The custom CSS rules will apply in your Angular component if one of the following conditions is met:

The styles 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.

import { Component, ViewEncapsulation } from "@angular/core";
@Component({
    selector: "my-app",
    encapsulation: ViewEncapsulation.None,
    ...
})

Best Practices

When implementing CSS overrides, it's usually best to set custom CSS classes through the component's exposed parameters and event arguments. This brings the following benefits:

No need to be familiar with the components' HTML rendering and built-in CSS styles, although this knowledge is recommended and cannot be fully avoided.
The custom CSS code in the application is more future-proof if a rendering change occurs.
The custom CSS classes may follow a naming convention of the app, instead of the naming convention of the Telerik themes.

The example below demonstrates how to set custom CSS classes for the Grid and the ComboBox components.

Change Theme

Theme

Loading ...