New to Telerik UI for Blazor? Download free 30-day trial

Override Theme Styles

Sometimes 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. In scenarios with a larger number of customizations, it may be more practical to use a different approach, for example, a custom theme.

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.


To see what CSS styles are applied on an HTML element, use the browser's developer tools.

Blazor CSS Isolation

CSS isolation is a .NET feature, which scopes styles to a specific Razor component.

  • There are two cases when CSS isolation may not work with UI for Blazor components. We explain the reasons and suggest workarounds in this knowledge base article. The two cases are:
    • Using isolated styles with a component Class.
    • Using isolated styles for popups (Window, Dialog).

See Also

In this article