如何通过CSS隔离自定义Radzen Blazor组件样式？及::deep相关问题

不需要修改全局CSS就能调整Radzen组件样式，利用Blazor的CSS隔离+::deep伪元素是正确方案，但你遇到的body特定类无法作用于嵌套Radzen组件的问题，是因为选择器结构不符合Blazor CSS隔离的处理逻辑。

问题原因分析 #

你原来的写法中，将.other-body-class .rz-button放在::deep块内，Blazor的CSS隔离机制会给这个选择器自动添加当前组件的作用域属性（比如[data-b-xxxxxxx]），最终生成的样式类似：

::deep .rz-button {
  color: #fff;
}
.other-body-class [data-b-xxxxxxx] .rz-button {
  color: red !important;
}

但body元素不会带有当前组件的作用域属性，因此这个选择器根本匹配不到任何元素。而你的.heading样式能生效，是因为.heading所在的元素属于当前组件，带有作用域属性，所以.other-body-class .heading可以正常匹配。

解决方案 #

调整选择器结构，将::deep直接应用到.rz-button选择器前，让body的类作为父级选择器，::deep负责穿透到子组件的Radzen元素：

/* 默认样式：穿透到所有子组件的Radzen按钮 */
::deep .rz-button {
  color: #fff;
  /* 其他样式 */
}

/* 当body带有other-body-class时，调整子组件的Radzen按钮样式 */
.other-body-class ::deep .rz-button {
  color: red !important;
}

/* 自身组件的heading样式（不受影响） */
.heading {
  color: blue;
}
.other-body-class .heading {
  color: red;
}

原理说明 #

::deep的作用是取消后续选择器的CSS隔离作用域限制。当写成.other-body-class ::deep .rz-button时，Blazor会保留.other-body-class的全局匹配特性，同时让::deep .rz-button穿透到当前组件的所有子组件中，匹配其中的.rz-button元素，这样就能正确作用到Radzen组件上了。

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