Blazor CSS隔离：父组件传类名参数给子组件不生效问题

你的代码里有两个核心问题导致样式不生效：

• CSS选择器语法错误：类名firstLayer和secondLayer前面没加.，浏览器会把它们识别为HTML标签名而非类选择器
• ::deep的使用逻辑没匹配Blazor CSS隔离的穿透规则

修正后的父组件CSS代码（二选一即可） #

方案1：仅穿透子组件的目标类

.firstLayer ::deep .secondLayer {
  color: blue;
}

方案2：全局穿透整个选择器链

::deep .firstLayer .secondLayer {
  color: blue;
}

原理说明 #

Blazor CSS隔离会自动给组件内的元素添加唯一的隔离属性（比如b-abc123），父组件的默认样式无法跨组件影响子元素。::deep关键字的作用是让样式突破这个隔离限制，把规则应用到子组件内的目标元素上。同时必须确保类选择器前面加.，否则浏览器无法匹配到对应的DOM元素。

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