Blazor组件隔离CSS无法作用于EditForm的InputText控件问题

问题原因 #

Blazor组件隔离CSS会自动给当前组件内的原生HTML元素添加专属哈希类（如b-rbinozve8m），但InputText是Blazor内置表单组件，它渲染出的input元素会携带自身组件的隔离哈希（如_bl_9d02f742-2a91-4e7b-aede-108ae5da9f8a），而非当前组件的哈希，导致当前组件的隔离样式无法匹配到该input元素。

解决方案 #

使用Blazor隔离CSS支持的::deep伪选择器，穿透组件隔离边界，让样式作用到InputText生成的DOM元素：

方法1：通过类选择器穿透 #

修改MyComponent.razor.css中的样式：

label {
  color: blue; /* 正常生效 */
}

::deep .form-control {
  background: red; /* 可作用于InputText生成的input */
}

方法2：通过元素选择器穿透 #

若无需依赖类名，也可直接针对input元素设置：

::deep input {
  background: red;
}

补充说明 #

• ::deep是Blazor隔离CSS的专属语法，用于打破组件样式隔离，让样式能影响到子组件渲染的DOM元素
• 内联样式或组件内<style>标签不受隔离哈希限制，所以能直接生效，但使用隔离CSS+::deep能保持项目样式的一致性和可维护性

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