Look into ways to pre-render styles in SSB

Right now, SSB works like this:

<p class="@div">If everything is working right, the background of this paragraph tag should be pink.</p>

@code {
    private string div;

    protected override async Task OnAfterRenderAsync()
    {
       div = await Styled.Css("background-color: pink;");
       StateHasChanged();
    }
}

While this works, it will cause a small flicker on the browser side because the plain html will be rendered first then “enhanced” with the css.

Is there a way the all the styles can be “pre-rendered” and set down with the html?

[chanan]

I will take a look, thanks for the links!

Also, I forgot to mention, be sure to run development: false in production.

[esso23]

OK thanks, I’ll try that. Also, I’m not sure if you’re aware, but there’s this issue in Blazor repo https://github.com/dotnet/aspnetcore/issues/10170 and this tag https://github.com/dotnet/aspnetcore/labels/feature-blazor-css-isolation They plan to release it in preview7 of Blazor. Should be worth monitoring.

Also not sure if helpful but you can look into Skclusive’s library and how he handles styles there. https://github.com/skclusive/Skclusive.Core.Component/blob/master/src/Component/Styled.cs https://github.com/skclusive/Skclusive.Material.Component