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.

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

Tools

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

• Inspect the HTML output of a page
• See the applied styles for a specific element
• Inspect elements that hide automatically and disappear from the DOM

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

• How to customize the look of Telerik Blazor components