C# Blazor wrong scope identifier in component.razor.css

1 day ago 1
ARTICLE AD BOX

I use CSS isolation in my Blazor web app, but my CSS styles are not applied to my component.

Component code in file TablePaginator.razor:

<FluentPaginator State="@Pagination" Class="flat-paginator">

CSS in file TablePaginator.razor.css:

.flat-paginator { margin-top: 0 !important; padding: 0 !important; }

I see in browser page source code this:

<div class="paginator flat-paginator" b-mskuhp0vb1>

And the CSS file loaded in the browser:

.flat-paginator[b-26nq9su6s6] { margin-top: 0 !important; padding: 0 !important; }

The scope identifier is wrong (b-mskuhp0vb1 - b-26nq9su6s6) and styles are not applied.

I cleared my browser cache, I cleared and rebuilt the project in Visual Studio, I cleared bin and obj folders, I recreated files TablePaginator.razor and TablePaginator.razor.css.....

What am I doing wrong?

Read Entire Article