Razor中使用Html.Raw()时CSS类样式不生效的问题求助

你遇到的是Blazor的CSS隔离特性导致的问题：Blazor会自动为组件内的DOM元素添加生成的作用域属性（比如b-skxp0olev1），同时将组件对应的.razor.css文件中的样式选择器自动修改为包含该属性（比如.spec[b-skxp0olev1]），以此实现组件样式隔离。但Html.Raw()输出的是纯字符串HTML，Blazor不会解析并处理其中的元素，因此这些元素不会带上作用域属性，自然匹配不上修改后的CSS选择器，导致样式失效。

以下是几种可行的解决方式，根据你的场景选择：

1. 使用Blazor原生渲染替代Html.Raw（推荐） #

尽量避免直接拼接HTML字符串，改用Blazor的组件或RenderFragment来构建UI。比如：

<span class="spec">comment</span>

如果需要动态生成内容，可定义局部组件或用RenderTreeBuilder构建，这样Blazor会自动为元素添加作用域属性，样式就能正常生效。

2. 将样式放到全局CSS文件 #

如果.spec样式是全局通用的，直接将其移到wwwroot/css/site.css这类全局CSS文件中。全局样式不会被Blazor添加作用域属性，因此不管元素是否带有b-*属性，都能匹配生效。

3. 手动添加组件作用域属性到Html.Raw的元素中 #

如果必须使用Html.Raw()，可以通过Blazor的API获取当前组件的作用域ID，手动拼接到HTML字符串里：
首先注入组件ID提供器：

@inject Microsoft.AspNetCore.Components.IComponentIdProvider ComponentIdProvider

然后拼接HTML：

@{
    var componentId = ComponentIdProvider.GetComponentId(this);
    string elem = $"<span b-{componentId} class=\"spec\">comment</span>";
}
<div>@Html.Raw(elem)</div>

这样生成的元素会带上当前组件的作用域属性，就能匹配.razor.css中被修改后的样式选择器。

4. 禁用当前组件的CSS隔离 #

如果不需要该组件的样式隔离，可以删除组件对应的.razor.css文件，或者在项目文件（.csproj）中配置禁用特定组件的隔离：

<ItemGroup>
  <None Remove="YourComponent.razor.css" />
</ItemGroup>

但此方法可能影响组件内其他样式的隔离性，需谨慎使用。

内容的提问来源于stack exchange，提问作者Gigi