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/