Blazor CSS自定义作用域标识符配置异常：样式引用问题

我参考微软文档为Blazor隔离CSS配置自定义作用域标识符，在.csproj文件中添加了如下配置：

<ItemGroup>
  <None Update="Pages/Jobs.razor.css" CssScope="jobs-scope" />
</ItemGroup>

我的Jobs.Razor.css文件内容为：

::deep .blurry-dialog-background {
  backdrop-filter: blur(10px);
}

原本尝试在Jobs.Razor.cs中这样引用样式：

DialogOptions options = new()
{
    ClassBackground = "blurry-dialog-background[jobs-scope]",
    CloseButton = true,
};

但通过Chrome开发者工具发现生成的CSS文件如下：

/* _content/Project/Pages/Jobs.razor.rz.scp.css */
[jobs-scope] .blurry-dialog-background {
  backdrop-filter: blur(10px);
}

请问我该如何在代码中正确引用该CSS样式？自动生成的CSS作用域格式不一致，我不确定是操作错误还是存在Bug？

这不是Bug，是::deep与自定义作用域标识符结合后的正常逻辑，调整引用方式即可解决：

1. 理解生成的CSS规则
   生成的[jobs-scope] .blurry-dialog-background表示：带有jobs-scope属性的元素的后代中，拥有blurry-dialog-background类的元素会应用该样式。你之前的写法把作用域标识符作为类的后缀，与实际生成规则完全相反。

2. 常规场景的正确引用
   如果弹窗是从Jobs.razor组件内部触发的，Blazor会自动为组件根元素添加jobs-scope属性，此时只需保持ClassBackground为目标类名即可：

DialogOptions options = new()
{
    ClassBackground = "blurry-dialog-background",
    CloseButton = true,
};

弹窗的背景元素作为Jobs.razor的后代，会自动匹配生成的CSS规则。

3. 全局弹窗的特殊处理
   如果弹窗是全局挂载的（不属于Jobs.razor的DOM树），需要调整CSS和引用逻辑：

• 修改Jobs.Razor.css，移除::deep：

.blurry-dialog-background {
  backdrop-filter: blur(10px);
}

• 或者保留::deep，但为弹窗容器手动添加jobs-scope属性（若弹窗支持自定义属性），此时ClassBackground仍设为"blurry-dialog-background"即可。

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