cssblazorfluent

In Blazor Fluent Grid, how to add alternate background style to odd rows?

I'm trying add alternate background style to odd rows in Blazor Fluent Grid it seams that it is not possible out of the box, so I tried with some CSS like

.fluent-data-grid tbody tr:nth-child(odd) {
     background: blue !important;
 }

and

fluent-data-grid-row:nth-child(odd) {
    background: blue !important;
}

But it is not working. I can set for the column like this and it works fine

 .fluent-data-grid td:nth-child(odd) {
     background: blue !important;
 }

To replicate create at new Blazor Fluent Web app in VS, and in the Weather.razor page add the style

@page "/weather"
@attribute [StreamRendering]

<style>
    .fluent-data-grid tr:nth-child(odd) {
        background: blue !important;
    }

    .fluent-data-grid td:nth-child(odd) {
        background: red !important;
    }
</style>

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

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

<FluentDataGrid Id="weathergrid" 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>

Run it and see that it has no effect on the row color

enter image description here

How do I get this to work?

Solution

  • This is for the template weather forecast using FluentUI.

    Note I add a pseudo element <isolation-enable> to enable css isolation on a root component for ::deep to work. This is not required if the FluentDataGrid is nested.

    I use the parameter RowClass which takes a function here I simply return a class name "alternate".

    Then the isolated css will work. Fluent uses strongly scoped styles and when FluentUI's default class is applied it clobbers your values with higher specificity.

    <isolation-enabler>
    <FluentDataGrid Id="weathergrid" 
                    Items="@forecasts"
                    GridTemplateColumns="1fr 1fr 1fr 2fr"
                    TGridItem=WeatherForecast
                    RowClass="@((_) => "alternate")">
        <PropertyColumn Title="Date" Property="@(c => c!.Date)" Sortable="true" Align="Align.Start" />
        <PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Sortable="true" Align="Align.Center" />
        <PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Sortable="true" Align="Align.Center" />
        <PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Sortable="true" Align="Align.End" />
    </FluentDataGrid>
</isolation-enabler>

    Weather.razor.css

    ::deep tr:nth-child(odd) > .alternate {
    background: #e6f7ff !important; /* Light blue for odd rows */
}

::deep tr:nth-child(even) > .alternate {
    background: #ccefff !important; /* Slightly darker blue for even rows */
}

    The result: enter image description here

    <isolation-enable> has no semantic meaning to your browser, therefore it does not affect the layout of your html.

    Using the RowClass parameter can allow you to do clever things like heat maps etc by passing, in this case the WeatherForecast, and returning a different class based on value.