如何为Blazor Fluent Grid奇数行添加交替背景样式？

问题原因 #

• Fluent DataGrid 内部通过自定义元素 <fluent-data-grid-row> 渲染行，原生 tr 选择器无法直接穿透组件的样式隔离机制
• 组件内置的 td 元素默认背景样式会覆盖 tr 的背景设置

解决方案 #

方案1：通过RowTemplate自定义行样式（推荐） #

直接在FluentDataGrid中使用RowTemplate模板，根据行索引判断奇偶行，绑定自定义样式或类名，完全可控且符合Blazor组件开发规范：

@page "/weather"
@attribute [StreamRendering]

<style>
    .odd-row {
        background-color: blue;
    }
    /* 确保td继承行的背景色，避免覆盖 */
    .odd-row td {
        background-color: inherit;
    }
</style>

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>This component demonstrates showing data.</p>

<FluentDataGrid Items="@forecasts" GridTemplateColumns="1fr 1fr 1fr 2fr" Loading="@(forecasts == null)" Style="height:204px;" TGridItem="WeatherForecast">
    <RowTemplate>
        <tr class="@(context.Index % 2 == 1 ? "odd-row" : "")">
            <PropertyColumnCell Column="@DateColumn" />
            <PropertyColumnCell Column="@TempCColumn" />
            <PropertyColumnCell Column="@TempFColumn" />
            <PropertyColumnCell Column="@SummaryColumn" />
        </tr>
    </RowTemplate>

    <PropertyColumn @ref="DateColumn" Title="Date" Property="@(c => c!.Date)" Align="Align.Start"/>
    <PropertyColumn @ref="TempCColumn" Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Align="Align.Center"/>
    <PropertyColumn @ref="TempFColumn" Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Align="Align.Center"/>
    <PropertyColumn @ref="SummaryColumn" Title="Summary" Property="@(c => c!.Summary)" Align="Align.End"/>
</FluentDataGrid>

@code {
    private PropertyColumn<WeatherForecast>? DateColumn, TempCColumn, TempFColumn, SummaryColumn;
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        var startDate = DateOnly.FromDateTime(DateTime.Now);
        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
        }).ToArray();
    }

    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    public class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

方案2：使用::deep穿透样式隔离 #

利用Blazor的::deep伪元素突破组件样式隔离，直接选中内部DOM元素快速生效：

@page "/weather"
@attribute [StreamRendering]

<style>
    ::deep .fluent-data-grid tbody tr:nth-child(odd) {
        background-color: blue !important;
    }
    /* 覆盖td默认背景，确保行背景可见 */
    ::deep .fluent-data-grid tbody tr:nth-child(odd) td {
        background-color: inherit !important;
    }
</style>

<!-- 其余代码与原示例一致 -->
<FluentDataGrid Items="@forecasts" GridTemplateColumns="1fr 1fr 1fr 2fr" Loading="@(forecasts == null)" Style="height:204px;" TGridItem="WeatherForecast">
    <PropertyColumn Title="Date" Property="@(c => c!.Date)" Align="Align.Start"/>
    <PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Align="Align.Center"/>
    <PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Align="Align.Center"/>
    <PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Align="Align.End"/>
</FluentDataGrid>

说明 #

• 方案1更稳定，不依赖组件内部DOM结构，后续组件版本更新也不会受影响
• 方案2适合快速测试，但如果Fluent DataGrid内部DOM结构变更，可能会失效

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