Custom Styling Components Recommendations

[oneolddev]

There are many challenges with custom styling applications using FluentUI Blazor components. These components are based on Fluent UI Web Components that favors consistency over flexibility. The FluentUI Blazor library just provides a convenient wrapper. The styling of a component is based on one or more design tokens. These tokens make up a theme. Changing a design token changes all elements that use that token for styling.

Changing the style of a particular Blazor component is further complicated by the extensive use of the shadow dom. A web component's styling can be isolated from the global CSS system which can make custom styling difficult.

My custom styling recommendations, in order, are the following:

1. Style using design tokens where possible with the understanding that it impacts the entire application.
2. If the need is to change a limited set of components, customize using CSS.
   • If Shadow Parts are exposed, style the part.
   • Last resort, style the shadow element directly

Below is an example of using the last resort:

<style>
    fluent-switch.mySwitch {
        --neutral-foreground-rest: var(--myColor);
        --accent-fill-hover: var(--myColor);
        --accent-fill-active: var(--myColor);
        --accent-fill-rest: var(--myColor);
    }

    fluent-switch.red {
        --myColor: red;
    }

    fluent-switch.green {
        --myColor: green;
    }

    fluent-switch.blue {
        --myColor: blue;
    }

    fluent-switch.black {
        --myColor: black;
    }
</style>

<FluentSwitch />
<hr />
<FluentSwitch Class="mySwitch red" />
<FluentSwitch Class="mySwitch green" />
<FluentSwitch Class="mySwitch blue" />
<FluentSwitch Class="mySwitch black" />

Displays the following:

I hope someone finds this helpful.

[vnbaaij]

With regards to recommendation 1:
It depends...

If you use the .WithDefault() method of a Design Token, you will indeed set it for the entire application.

If you use the .SetValueFor() method, you can target a specific component by specifying an element reference to that component to the method.

@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens

[Inject]
private AccentBaseColor AccentBaseColor { get; set; } = default!;

[Inject]
private BodyFont BodyFont { get; set; } = default!;

private FluentButton? ref1;
private FluentButton? ref2;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	if (firstRender)
	{
		//Set to Excel color
		await AccentBaseColor.SetValueFor(ref1!.Element, "#185ABD".ToSwatch());

		//Set the font
		await BodyFont.SetValueFor(ref2!.Element, "Comic Sans MS");

		StateHasChanged();
	}
}
 

[oneolddev]

@vnbaaij

With regards to recommendation 1:
It depends...

If you use the .WithDefault() method of a Design Token, you will indeed set it for the entire application.

If you use the .SetValueFor() method, you can target a specific component by specifying an element reference to that component to the method.

I should have written

1. Style using design tokens if you wish to impact the entire application.

From a coding style perspective, I have a preference for using CSS to style my applications where possible. These applications run on multiple form factors from phones to desktops with extra wide screens and need to be responsive.

This preference comes with a cost. It is more error prone and complex since targetting the underlying web components is sometimes required. The help provided by the tooling like intellisense is not always available which can be a productivity killer. Changing the underlying CSS variables used to support Design Tokens can break things since some are part of the recipes used ensure consistency and accessibility.

Overall, this is my goto UI library for Blazor.

[vnbaaij]

What I should have written is that it is possible to only change a specific component with a design token. It doesn't always have to target the entire application.