MudBlazor 6.10.0中MudDataGrid列标题未加粗问题求助

问题分析 #

从截图可见，th标签的默认加粗样式被其他全局样式或自定义样式覆盖，导致MudDataGrid的列标题未显示为官方示例的加粗效果。

解决方法 #

方法1：排查并移除冲突的全局样式 #

检查项目中全局CSS文件（如app.css、site.css）是否存在如下类似代码：

th {
    font-weight: normal;
}

若存在，直接删除该样式或调整其作用范围，避免影响MudDataGrid的表头。

方法2：自定义CSS强制表头加粗 #

给MudDataGrid添加自定义类名，通过CSS增强表头样式优先级：

1. 修改MudDataGrid组件定义，添加Class属性：

<MudDataGrid T="Range" Class="custom-datagrid" MultiSelection="true" FilterCaseSensitivity="DataGridFilterCaseSensitivity.CaseInsensitive" Items="@_carRanges" SortMode="SortMode.Multiple" Dense ="true"
             QuickFilter="@QuickFilter" ColumnResizeMode="@(ResizeMode.Column)" DragDropColumnReordering="true" Striped="true" FilterMode="DataGridFilterMode.ColumnFilterRow">
    <!-- 其他内容保持不变 -->
</MudDataGrid>

2. 在全局CSS文件中添加如下样式：

.custom-datagrid th {
    font-weight: bold !important;
}

方法3：通过MudTheme统一配置表头样式 #

在MainLayout.razor中自定义MudTheme，设置DataGrid表头字体加粗：

1. 在MainLayout的代码块中定义主题：

@code {
    private MudTheme _customTheme = new MudTheme()
    {
        DataGrid = new DataGridTheme()
        {
            HeaderStyle = new Style()
            {
                FontWeight = "bold"
            }
        }
    };
}

2. 将自定义主题传给MudThemeProvider：

<MudThemeProvider Theme="@_customTheme" />

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