Blazor+DevExpress项目中自定义动态CSS样式未生效求助

这是一个使用DevExpress的Blazor应用，因包含108个CSS和JS文件无法创建最小可复现示例（MRE），但问题明确。

基础代码 #

编写的原始HTML #

<div class="my-main-scrollbar">

对应MyPage.razor.css中的CSS #

.my-main-scrollbar {
    overflow: auto;
    height: 100%;
}

实际生成的页面代码 #

页面源代码中的最终HTML #

<div class="my-main-scrollbar" b-jv8gxb7csr>

Blazor动态生成的CSS #

.my-main-scrollbar[b-jv8gxb7csr] {
    overflow: auto;
    height: 100%;
}

问题现象 #

打开F12调试工具选中该div后，合并样式中未看到overflow和height的设置，样式完全未生效。后续更新发现自动生成的CSS文件中还有其他样式未生效，且已确认该自动生成文件存在、页面链接正确、内容符合预期，推测Blazor存在异常。

可能的排查方向 #

• CSS优先级冲突：DevExpress内置CSS可能用了更高优先级的选择器覆盖了你的样式。检查F12的「已禁用样式」标签，看是否样式被标记为无效；或给选择器添加父级元素提升优先级，比如.dx-viewport .my-main-scrollbar[b-jv8gxb7csr]。
• 样式作用域匹配问题：确认MyPage.razor.css是否正确关联到对应的组件页面，组件路由是否匹配，避免样式作用域错误。
• 浏览器缓存干扰：强制刷新页面（Ctrl+F5）清除缓存，确保浏览器加载最新的动态生成CSS文件。
• 样式加载顺序问题：检查DevExpress的CSS是否在Blazor组件样式之后加载，后续加载的样式会覆盖之前的。调整加载顺序，让组件样式在DevExpress样式之后引入。
• Blazor运行时异常：查看浏览器控制台的JS报错及后端日志，确认是否有Blazor渲染相关的异常导致样式未正确应用。

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