UI Flashes after Migrating Blazor Projects To .NET 6

A table with the title of "Vegetables". There are three columns (Id, Product and Quantity) and 3 rows of example data.

The Problem

I’ve noticed an issue recently after upgrading a few Blazor projects from .NET 5 to .NET 6 where the UI flashes after every call to StateHasChanged. Something like this:

A table with the title of "Vegetables". There are three columns (Id, Product and Quantity) and 3 rows of example data. The Id field disappears and reappears once a second causing the table to visibily shift back and forth
Flash. Flash. Flash. Flash…

Yeah, that’s not annoying at all. Unfortunately it was happening in quite a few different places and was pretty darn noticeable, so it looked like I was going to have to dive in and figure out what exactly was causing this to go wrong (despite working perfectly in .NET 5)!

Continue reading “UI Flashes after Migrating Blazor Projects To .NET 6”

Referencing Blazorise Theme Values in Custom CSS

A header image displaying two different div elements with two differently coloured shadows

Introduction

Blazorise is an excellent library that I’ve been using a lot lately. While it has great support for declaring custom visual themes, you’ll occasionally run into situations where what you’re trying to do isn’t fully supported.

Take this super contrived example: I want to set the shadow on a div to use the primary colour defined in my theme, but there’s no attribute in Blazorise to do this directly (at time of writing). I could hard-code the colour to the same hex value as what I’ve set in my theme, but not only is this generally bad practice (since it’s easy to update one value and not the other), it locks you into only one colour even though the theme can be modified dynamically during runtime. So how can we access our Blazorise theme values in custom CSS?

Continue reading “Referencing Blazorise Theme Values in Custom CSS”