Previous tip (Keep your CSS specific with CSS Isolation) Next tip (Need to render a large list of items in your Blazor app?) >>

Use CSS Isolation with child components

By default when using CSS Isolation, any styles you define in your component’s .css file will apply only to that component (not to its children).

But you can use the ::deep combinator to signify that the style declaration should be applied to both the parent component and its children.

<!-- Counter.razor.css -->
::deep h1 {
    color: red;
    font-family: Tahoma, sans-serif;
}

<!-- Counter.razor.css -->
<h1>This will be red</h1>
<FancyNumber />

<!-- FancyNumber.razor -->
<h1>This will be red too</h1>