Blazor中组件CSS隔离无法作用于body标签的原因解析

Blazor的CSS隔离机制核心是给组件内部的DOM元素自动添加唯一标识属性（比如b-随机字符串），生成的CSS选择器都会带上这个属性，确保样式只作用于当前组件的内部元素，不会污染全局。

你的两种尝试为什么失效/不符合预期 #

• 组件的.razor.css文件：这个文件会被Blazor自动处理，所有选择器都会追加组件的隔离属性。比如你写的body会被转换成body[b-xxxxxx]，但页面的<body>元素并没有这个隔离属性，所以样式完全匹配不到，加!important也没用——选择器本身就不对。
• 组件内的<style>标签：这种方式写的样式是全局生效的，没有经过隔离处理，所以能修改body样式，但这已经和CSS隔离无关了，本质是全局样式，会影响整个应用的body。

正确修改body样式的方式 #

如果要修改body的样式，应该用全局样式方案：

• 直接在wwwroot/css/site.css（或项目的全局CSS文件）中添加body的样式规则；
• 在_Host.cshtml的<head>里添加全局<style>标签写body样式；
• 如果需要在组件中动态修改body样式（比如根据组件状态切换背景），可以通过JS互操作实现，比如在组件中调用JS代码修改document.body.style.backgroundColor。

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