Blazor Server中为Razor组件添加CSS隔离文件，样式不生效

前言

Razor组件添加CSS隔离应当是使用最为简单，也是使用最为方便的一种CSS隔离方式。实现Razor组件间CSS隔离非常简单，只需要在组件所在的目录下建立同名的.razor.css文件即可——若文件夹A下存在名为Component.razor的组件，则只需要在文件夹A下建立Component.razor.css，即可实现为Component.razor组件设置单独的样式而不影响其他组件。组件CSS文件（Component.razor.css）将会被生成为“项目名.styles.css”的文件，在.NET 5中会被默认添加到_Host.cshtml中。¹

问题

最近在学习Blazor中使用Ant Design Pro的时候，给Razor组件添加css隔离样式时，样式总是不生效。该怎么解决呢？

css隔离文件添加方法：在xxxx.razor文件所在文件夹中添加xxxx.razor.css文件即可，如下图：

下图是页脚组件的代码

下图是页脚组件样式代码

效果

解决

新建了一个Blazor Server（非Ant Design Pro）项目，发现生成的模板文件中也是有css隔离文件的，而且css样式是生效的，受到一篇博客：Blazor中的CSS隔离问题 的启发，我对比了Ant Design Pro 模板生成的项目下的_Host.cshtml和vs生成的Blazor Server项目_Host.cshtml 文件的区别：

（1）Ant Design Pro模板生成的

（2）Blazor Server 模板生成的

果然，Ant Design Pro模板生成的_Host.cshtml 没有自动引入<link href="项目名.styles.css" rel="stylesheet" />，那我就手动引入一下试试

测试之后，果然生效了

总结：

Blazor Server 项目中为Razor组件添加css隔离样式不生效，首先确定 _Host.cshtml 文件中没有引入<link href="项目名.styles.css" rel="stylesheet" />，没有的话，手动添加即可，更多问题请参考：Blazor中的CSS隔离问题

---

1. [原文出自] Blazor中的CSS隔离问题 ↩︎