如何修改Blazorise中DataGrid固定表头的背景色？

当开启FixedHeader后，Blazorise会为固定表头生成特定DOM结构，默认样式的选择器优先级高于自定义的.custom_header_styling类，导致背景色被覆盖。以下是几种无需关闭FixedHeader的解决办法：

方法1：提升CSS选择器特异性（推荐） #

针对固定表头的DOM结构，编写更精确的CSS选择器，让自定义样式优先级超过默认样式：

<style>
/* 匹配开启FixedHeader的DataGrid中的表头行 */
.data-grid.fixed-header thead tr.custom_header_styling {
    background-color: #1F2937;
    color: #ffffff;
}
</style>

这种方式无需使用!important，符合CSS最佳实践。

方法2：使用内联样式直接覆盖 #

修改HeaderStyling方法，直接设置内联样式（内联样式优先级高于类样式）：

private DataGridRowStyling HeaderStyling()
{
    return new DataGridRowStyling
    {
        Style = "background-color: #1F2937; color: #ffffff;"
    };
}

这个方法快速有效，但样式与代码耦合度较高，适合单个组件的临时需求。

方法3：通过Blazorise主题全局配置（长期方案） #

如果项目使用Blazorise主题系统，可以全局配置DataGrid固定表头的样式，避免零散的自定义CSS：

// 在Program.cs（或Startup.cs）的服务配置中添加
builder.Services.AddBlazorise(options =>
{
    options.Theme = new Theme
    {
        Components = new ThemeComponents
        {
            DataGrid = new ThemeDataGrid
            {
                Header = new ThemeDataGridHeader
                {
                    BackgroundColor = "#1F2937",
                    Color = "#ffffff"
                }
            }
        }
    };
});

这种方式能统一整个项目的DataGrid表头样式，维护性更好。

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