C# Blazor组件如何实现CSS隔离样式

Blazor组件CSS隔离通过编译期重写实现：Razor编译器为.razor文件对应HTML元素添加唯一属性，并重写同名.razor.css中选择器以限定作用域；文件命名、编码、构建包含及渲染模式均需严格匹配。

Blazor组件CSS隔离是怎么工作的

Blazor的CSS隔离不是靠运行时注入或作用域模拟，而是编译期重写：当你在.razor.css文件中写样式，Razor编译器会自动为该组件内所有HTML元素添加一个唯一属性（如b-2j5x8v9q7c），同时把CSS选择器也加上这个属性限定。最终生成的CSS只匹配本组件的DOM，不污染全局。

关键点在于文件命名必须严格匹配：ComponentName.razor 对应 ComponentName.razor.css（注意不是.css单独后缀，也不是ComponentName.css）。大小写、空格、路径层级都必须一致。

为什么写了Component.razor.css却没生效

常见失效原因不是语法问题，而是构建链路中断：

• .razor.css 文件未被包含在项目文件（.csproj）中 —— 默认SDK会自动包含，但若手动删过或改过，可能漏掉
• 文件编码不是UTF-8无BOM —— 某些编辑器保存时加了BOM，导致编译器跳过处理，控制台无报错但样式不生成
• 使用了@import或@layer等CSS新特性 —— 当前Blazor CSS隔离仅支持标准CSS语法，不解析嵌套或模块化指令
• 组件被RenderMode = RenderMode.Static渲染（如SSR预渲染）且未启用InteractiveServer或InteractiveWebAssembly —— 隔离样式依赖交互式渲染管道注入