The CSS isolation is only applied to the component level by default but you can extend it to the child component using “::deep
” attribute in the CSS file. This attribute is the Blazor attribute so, it only understands and parses by the Blazor engine. When “::deep
” attribute used in the CSS file, the Blazor engine also applied scope identifier to all descendants of components.
ChildComponent.razor
<hr />
<p>
paragraph:: This is child component content
</p>
<div>
div:: This is child component content
</div>
<hr />
@code {
}
ParentComponent.razor
@page "/parentcomponent"
<h3>Parent Component</h3>
<div>
<p>paragraph:: This is Parent Component content</p>
<ChildComponent></ChildComponent>
<div>
div:: This is parent component content
</div>
</div>
@code {
}
ParentComponent.razor.css
p {
color: red
}
::deep div {
color:orange;
font-weight:bold;
}
References
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-6.0
https://www.c-sharpcorner.com/article/css-isolation-in-blazor/