Blazor 组件化 CSS 作用域隔离教程

Blazor 的 CSS 隔离是编译期自动为 .razor.css 文件中选择器添加唯一属性标识并注入对应 HTML 属性，实现组件级样式作用域；需同名同目录配对文件，支持 ::deep 透传和 :global() 全局声明。

Blazor 提供了原生的 CSS 隔离（CSS Isolation）机制，让每个组件拥有专属样式，避免全局污染和命名冲突。它不是靠 JS 或运行时封装，而是编译期自动处理：你写一个 .razor.css 文件，Blazor 就会为其中的选择器自动添加唯一属性标识，并在 HTML 中注入对应属性，实现真正的作用域隔离。

如何启用 CSS 隔离

新建 Blazor 项目（.NET 5+）默认已支持。只需为组件（如 Counter.razor）创建同名、同目录的 Counter.razor.css 文件，Blazor 就会自动识别并处理。

• 文件名必须严格匹配：组件名 + .razor.css（例如 NavMenu.razor → NavMenu.razor.css）
• 路径必须一致：两个文件需在同一个文件夹下
• 无需手动引入或注册，构建时自动打包进 project.styles.css

样式如何被隔离？看个例子

假设 Counter.razor 中有：

<button class="btn btn-primary">Click me</button>

登录后复制

在 Counter.razor.css 中写：

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

.btn-primary { background: #007bff; }
.btn-primary:hover { opacity: 0.9; }

登录后复制

构建后，Blazor 会把它转成类似这样：

标签： css html js 浏览器 app 工具 常见问题 组件渲染 作用域 .net