Blazor中CSS隔离无法用在子组件内部

Blazor的CSS隔离是个很好的东西，如图，只需添加一个与Razor组件同名的CSS文件，这个文件中的CSS样式只会在同名的Razor组件中使用。

原理是通过在dom元素添加一个代表标识符的属性



在CSS中也会添加

但是只适用于html元素，对于自定义封装的组件内部并不适用，标识符的属性只会添加到html元素，最初发现这个问题时并没有解决，只好在全局的CSS文件中添加了样式。

<div class="navigation-list">
	@foreach (var item in navigationButtons)
	{
		<MListItem Class="navigation-btn flex-grow-1 d-flex justify-content-center" Href="@item.Href">
			@item.Title
		</MListItem>
	}
</div>

今天又研究了一下，看到微软文档才找到办法（文档的地址在最下面）。将::deep添加到外部的html元素样式后面

以下是两种样式的对比。

.navigation-list .navigation-btn::before {
        border-radius: 32px;
    }

.navigation-list ::deep .navigation-btn::before {
        border-radius: 32px;
    }

参考文献

https://learn.microsoft.com/zh-CN/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0

https://www.yisu.com/zixun/399850.html