小尺寸/移动端下MudBlazor条件行背景色不生效的解决方法

问题根因 #

• 代码绑定错误：<MudTable>标签上绑定的是RowClassFunc（行CSS类委托），但你实际实现的是返回行内样式字符串的RowStyleFunc方法，委托属性和方法不匹配。
• 框架渲染特性问题：MudTable在小屏/移动端会自动切换为响应式卡片布局，默认每个单元格（mud-table-cell）自带白色背景，会覆盖行级设置的背景色；桌面端渲染为普通表格行时不存在这个遮挡问题。

修复步骤 #

1. 修正组件属性绑定
   如果你要使用返回行内样式的逻辑，把组件上的RowClassFunc替换为RowStyleFunc，和你实现的方法对应：

   <MudTable ... RowStyleFunc="@RowStyleFunc">
       <!-- 原有列定义保持不变 -->
   </MudTable>
   

   你原有的C#判断逻辑不需要修改，只要绑定到正确的委托属性即可。

2. 添加全局样式覆盖移动端默认单元格背景
   把下面的CSS代码添加到项目全局样式文件（如App.razor.css或wwwroot/css/app.css）中，让行级背景可以透传到移动端卡片布局下的单元格：

   /* 修复响应式模式下单元格白色背景遮挡行背景的问题 */
   .mud-table-responsive .mud-table-cell {
       background-color: inherit !important;
   }
   

更易维护的实现方式（样式分离） #

如果不想写行内样式，可以用RowClassFunc绑定CSS类名，后续修改样式不需要调整C#逻辑：

1. 先定义状态对应的样式类：

   .state-prete {
       background-color: #FFCDD2 !important;
   }
   .state-enattente {
       background-color: #FFECB3 !important;
   }
   .state-default {
       background-color: blue !important;
   }
   /* 同步添加响应式透传规则 */
   .mud-table-responsive .mud-table-cell {
       background-color: inherit !important;
   }
   

2. 修改C#方法返回对应类名：

   private string SelectedRowClassFunc(CommandeDTO cmd, int index)
   {
       if (cmd == null) return "state-default";
       return cmd.GetEtatCommande() switch
       {
           EnumEtatTable.Prete => "state-prete",
           EnumEtatTable.EnAttente => "state-enattente",
           _ => "state-default"
       };
   }
   

3. 组件正常绑定RowClassFunc="@SelectedRowClassFunc"即可，桌面和移动端场景下背景色规则都能正常生效。

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