Blazor 怎么使用 CSS 隔离

Blazor 的 CSS 隔离是通过 .razor.css 文件实现的原生样式作用域机制，编译时自动为选择器添加唯一属性前缀并注入对应属性到组件根元素，确保样式仅作用于当前组件；支持 ::deep 穿透和 :global() 全局回退，不依赖 Shadow DOM 或第三方库。

Blazor 的 CSS 隔离（CSS Isolation）是让组件样式只作用于当前组件、不污染全局的原生机制，不需要第三方库，也不依赖 Shadow DOM。核心是通过 .razor.css 文件实现自动作用域限定。

创建隔离 CSS 文件

在某个 Razor 组件（如 Counter.razor）同目录下，新建一个同名 CSS 文件：Counter.razor.css。Blazor 会自动识别并为其中所有选择器添加唯一属性前缀（如 _b_k2x9a1v4n3），同时给组件根元素注入对应属性，从而实现样式“仅在此组件内生效”。

• 文件名必须严格匹配（含大小写），且后缀为 .razor.css
• 支持普通 CSS、CSS 预处理器输出（需构建工具配合，如 Sass 编译后手动命名）
• 不支持 @import，但可通过 @layer 或嵌套规则组织代码

样式如何被隔离？

编译时，Blazor 将 Counter.razor.css 中的规则重写。例如：

.my-button { color: red; }
p > p { font-size: 14px; }

登录后复制

会被转成类似：

立即学习“前端免费学习笔记（深入）”；

标签： css 处理器 浏览器 工具 常见问题 作用域 red