MudDataGrid指定行字体颜色修改失效问题求助

问题说明 #

尝试修改MudDataGrid中已取消（Cancelled=true）行的背景色和字体颜色，背景色正常生效，但字体颜色无变化。相关代码如下：

组件定义代码 #

<MudPaper Class="pa-4 ma-2" Elevation="0">
    <MudDataGrid ServerData="LoadGridData" T="BookingDetailDto" @ref="_dataGridBookings" ReadOnly="true" Hover="true" Striped="true" RowStyleFunc="@_rowStyleFunc" SortMode="SortMode.None" HeaderClass="mud-table-header">
        <ToolBarContent>
            <MudText Typo="Typo.h6">Bookings</MudText>
            <MudSpacer />
            <MudTextField @bind-Value="_searchString" Placeholder="Search By Artist Name" Immediate="true" Class="mt-0"></MudTextField>
            <MudIconButton Size="@MudBlazor.Size.Small" Icon="@MudBlazor.Icons.Material.Rounded.Search" @onclick="() => Search()" Title="Search" />
            <MudIconButton Size="@MudBlazor.Size.Small" Icon="@MudBlazor.Icons.Material.Rounded.Restore" @onclick="() => Reset()" Title="Reset Grid View" />
        </ToolBarContent>
        <Columns>
            <MudBlazor.PropertyColumn Property="x => x.BookingId" Title="Booking Number" />
            <MudBlazor.PropertyColumn Property="x => x.AgencyIdentifier" Hidden />
            <MudBlazor.PropertyColumn Property="x => x.DateOfPerformance" Format="d" Title="Performance Date" />
            <MudBlazor.PropertyColumn Property="x => x.TimeOfPerformance" Title="Performance Time" />
            <MudBlazor.PropertyColumn Property="x => x.ArtistName" Title="Artist" />
            <MudBlazor.PropertyColumn Property="x => x.VenueName" Title="Venue" />
            <MudBlazor.TemplateColumn CellClass="d-flex justify-end">
                <CellTemplate>
                    <div @onclick:stopPropagation="true" @onclick:preventDefault="true">
                        <MudIconButton Size="@MudBlazor.Size.Small" Icon="@MudBlazor.Icons.Material.Rounded.Edit" @onclick="() => EditItem(context.Item!)" Title="Edit" />
                    </div>
                </CellTemplate>
            </MudBlazor.TemplateColumn>
        </Columns>
        <PagerContent>
            <MudDataGridPager T="BookingDetailDto" Disabled="false" />
        </PagerContent>
    </MudDataGrid>
</MudPaper>

行样式处理函数 #

private Func<BookingDetailDto, int, string> _rowStyleFunc => (x, i) =>
{
    string style = string.Empty;
    if(x.Cancelled)
    {
        style += "background-color: #FF0000;  color: white !important;";
    }
    return style;
};

问题原因 #

MudDataGrid的单元格（MudTd）元素通过CSS变量--mud-table-cell-color定义了默认文字颜色，且单元格的样式优先级高于行元素的color设置。即使在行样式中添加!important，也无法覆盖单元格自身的颜色规则，导致字体颜色不生效。

解决办法 #

方法1：使用RowClassFunc配合自定义CSS类（推荐） #

这种方式更符合CSS规范，样式管理更清晰。

1. 在组件的<style>块中定义自定义CSS类：

.cancelled-row {
    background-color: #FF0000;
}
.cancelled-row .mud-table-cell {
    color: white !important;
}

2. 将原有的RowStyleFunc替换为RowClassFunc：

private Func<BookingDetailDto, int, string> _rowClassFunc => (x, i) =>
{
    return x.Cancelled ? "cancelled-row" : string.Empty;
};

3. 修改MudDataGrid组件的属性，替换RowStyleFunc="@_rowStyleFunc"为RowClassFunc="@_rowClassFunc"。

方法2：通过CSS变量直接修改行样式 #

利用MudBlazor的CSS变量特性，直接在行样式中修改单元格颜色变量：

private Func<BookingDetailDto, int, string> _rowStyleFunc => (x, i) =>
{
    if(x.Cancelled)
    {
        return "background-color: #FF0000; --mud-table-cell-color: white;";
    }
    return string.Empty;
};

这样不需要额外定义CSS类，直接通过行样式覆盖单元格的颜色变量，即可让字体颜色生效。

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