MVC中CSS隔离未自动生成哈希属性，样式不生效如何解决？

我创建了视图组件_Card.cshtml及其对应的样式文件_Card.cshtml.css，样式代码如下：

.test {
   color: red;
   background-color: red;
}
.test_1 {
   color: blue;
   background-color: blue;
}

在_Card.cshtml中应用样式的代码：

<div class="test">
   some text
   <div class="test_1">
       some more text
   </div>
</div>

已在布局文件中添加CSS链接：

<head>
   <link rel="stylesheet" href="ProjectName.styles.css" />
</head>

浏览器Sources标签中生成的ProjectName.styles.css包含带哈希的样式：

/* _content/ProjectName/Views/_Card.cshtml.rz.scp.css */
.test[b-vf93ptq5bl] {
   color: red;
   background-color: red;
}
.test_1[b-vf93ptq5bl] {
   color: blue;
   background-color: blue;
}

但生成的HTML未包含b-vf93ptq5bl这类哈希属性，样式无法生效：

<div class="test">
   some text
   <div class="test_1">
       some more text
   </div>
</div>

请问为何哈希属性未自动生成并添加到HTML中？该如何解决？

• 混淆了Blazor组件样式隔离和Razor视图（MVC/Razor Pages）的样式处理：自动添加哈希属性是Blazor .razor组件独有的样式隔离特性，而.cshtml是MVC或Razor Pages的视图文件，框架不会为这类文件自动生成并注入哈希属性。
• 框架虽会将.cshtml.css文件打包到ProjectName.styles.css中并添加哈希后缀，但不会修改.cshtml渲染出的HTML元素，导致样式选择器与实际元素不匹配。

根据项目类型选择对应方案：

方案1：切换为Blazor组件（适用于Blazor项目） #

1. 将_Card.cshtml重命名为_Card.razor（Blazor组件的标准后缀）。
2. 保持_Card.razor.css的样式代码不变，Blazor框架会自动在渲染HTML时为元素添加对应的哈希属性，确保样式选择器匹配。
3. 在需要使用该组件的地方，通过<_Card />标签引用即可。

方案2：适配MVC/Razor Pages的样式处理（适用于MVC/Razor Pages项目） #

1. 放弃依赖自动哈希的样式隔离机制，直接使用普通CSS：
   • 将_Card.cshtml.css中的样式复制到全局CSS文件（如site.css），或者直接在_Card.cshtml中通过<style>标签内嵌样式。
2. 若需要样式隔离，手动添加唯一标识：
   • 给组件的根元素添加唯一类名（如card-component），然后在样式中嵌套选择器：

     .card-component .test {
        color: red;
        background-color: red;
     }
     .card-component .test_1 {
        color: blue;
        background-color: blue;
     }
     

     对应的HTML修改为：

     <div class="card-component test">
        some text
        <div class="test_1">
            some more text
        </div>
     </div>
     

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