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 Gridit 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

How do I get this to work?