FluentUI Blazor CSS

[true-perfect-code]

In previous projects I have also used w3-CSS (e.g. class="w3-table-all w3-hoverable"). In my latest project I use FluentUI Blazor and would like to switch from w3-CSS to Fluent CSS to reduce the number of JS libraries in the project. But unfortunately I can't find a proper analogy in FluentUI Blazor, e.g. in Fluent-Accordion I find a class="heading", in Fluent-Button then class="button" and so on. I would have expected e.g. class="fluent-heading" analogous to w3-heading etc.

How is CSS then implemented or assuming I would like to have my own HTML elements like FluentUI, which CSS classes do I use to realize this?

Thanks
pc

Background to this question:
FluentUI Blazor is actually a powerful library that doesn't leave anything to be wished for (at this point, many thanks to the FluentUI Blazor team for their excellent work). Nevertheless, there is currently still the problem with the release of JS resources, especially in relation to FluentUI tables (I have a report on this here). To work around the problem (hanging the MAUI Blazor app), I create my own HTML tables with rudimentary functions like sorting and searching. The issue with this is that the color of the table does not change automatically when I use DI AccentBaseColor. My hope is that I can solve this via Fluent CSS by formatting the tables not via W3 CSS but via FluentUI CSS.

[vnbaaij]

But unfortunately I can't find a proper analogy in FluentUI Blazor, e.g. in Fluent-Accordion I find a class="heading", in Fluent-Button then class="button" and so on. I would have expected e.g. class="fluent-heading" analogous to w3-heading etc.

We can only control the classes that we define ourselves. The heading and button you are describing are coming from the underlying web components and are set by these web components. They are not really meant to be changed. I'm not saying you can't change them but to stay within the bounds of the Fluent Design (which is the primary goal of this library) we think it is better if you don't.
For the components that we built (which do not have an underlying web component) we tend to follow the pattern of class=fluent-... so you should be able to target those.

Background to this question:
FluentUI Blazor is actually a powerful library that doesn't leave anything to be wished for (at this point, many thanks to the FluentUI Blazor team for their excellent work). Nevertheless, there is currently still the problem with the release of JS resources, especially in relation to FluentUI tables (I have a report on this here). To work around the problem (hanging the MAUI Blazor app), I create my own HTML tables with rudimentary functions like sorting and searching. The issue with this is that the color of the table does not change automatically when I use DI AccentBaseColor. My hope is that I can solve this via Fluent CSS by formatting the tables not via W3 CSS but via FluentUI CSS.

Thanks for the nice words. Can you remind me which issue you are referring to? We don't have anything like Fluent UI tables. Or ar you referring to the DataGrid? That component is using HTML tables now as well (since 4.11).

[true-perfect-code]

Hi @vnbaaij

Can you remind me which issue you are referring to?
See #3008 (sorry is DataGrid not a Table).

Has this problem (#1036) now been solved after 4.11?

They are not really meant to be changed.

Maybe I communicated it wrong, my intention is not to change internal classes (I already found out and described here how to change colors, fonts etc. in FluentUI), but my intention is to use the Fluent classes in my HTML elements to make them look like FluentUI blazor components.

Thanks
pc

[vnbaaij]

As said before, the issue lies on the MAUI side. Seems the issue is still open there. We are not going to add a separate grid just for this.

Maybe I communicated it wrong, my intention is not to change internal classes (I already found out and described here how to change colors, fonts etc. in FluentUI), but my intention is to use the Fluent classes in my HTML elements to make them look like FluentUI blazor components.

Ah, so the other way around :) . No we do not have a CSS file or set of classes/class names that will do this/add this for you.

[true-perfect-code]

Ok, I have found an efficient way to control custom HTML elements via Fluent CSS properties. This is especially important if you store the Fluent design-properties as user settings (I have already written about this in detail here, how to change font size, font colors, control colors etc. in FluentUI via DI/CSS).

As you have seen here, it does not work with Fluent that you have your own classes like with w3-CSS (because of Shadow-DOM). But you can still make it so that the settings that are changed via DI AccentBaseColor or DI NeutralBaseColor at runtime of the Blazor app also affect your own HTML elements. Here is how this works using the example of an HTML table:

1. First create a css file under wwwroot. In my case I use W3-CSS so I created w3.css and copied the CSS classes from w3 into it, which is not really important for this case. The important thing is that we add our class at the end of w3.css, which will contain the Fluent variable. What you call the class is up to you, I have defined it like this:

/* other w3 properties */
...
.w3-fluent-accent {
    color: var(--foreground-on-accent-rest) !important;
    background-color: var(--accent-fill-rest) !important;
}

2. You create an HTML table that is wrapped with a component (e.g. Fluentstack) and use your new css class

               <FluentGrid ...
                        <table id="myTable" class="w3-table-all w3-hoverable">
                            <thead>
                                <tr id="@(PopoverQuestionMig.IdPopover)" class="w3-fluent-accent">

3. I still had the problem that the header title color came from FluentLabel, specifically from the class “fluent-typography”.

                                    <th onclick="OnClickJS_SortColumn(2, 'myTable')">
                                        <FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Start" HorizontalGap="5">
                                            <FluentLabel Id="idToolTipColumnHeader" Class="w3-fluent-accent" Typo=@UserMana.UserSettings.TypographyBody Color="Color.Lightweight">
                                                @UserMana!.T("Todo")
                                            </FluentLabel>
                                            @if (UserMana!.UserSettings.Int__ToolTipDisplay)
                                            {
                                                <FluentTooltip Anchor="idToolTipColumnHeader" Position="TooltipPosition.Right">
                                                    @UserMana!.T("Click to sort")
                                                </FluentTooltip>
                                            }
                                        </FluentStack>
                                    </th>
                                </tr>
                            </thead>

Since this class is overwritten with the user settings in the MainLayout.razor (as I wrote about in detail at the beginning), this property was stronger, which results in the problem, because you set the fonts e.g. black and have a darker color with --accent-fill-rest, which then causes a very bad readable title (because black on a dark background).

To solve this problem you can add the following class to w3.css, which overrides the set property, but only if you want to do this yourself by using this class.

.w3-fluent-accent {
    color: var(--foreground-on-accent-rest) !important;
    background-color: var(--accent-fill-rest) !important;
}
.fluent-typography.w3-fluent-accent {
    color: var(--foreground-on-accent-rest) !important;
}

In this way you can also use other CSS Fluent variables and adapt your own w3.css (or whatever the file should be called) accordingly with your own classes, which you then call in your own HTML elements. this gives you your own component, which appears with the same CSS properties as the rest of the Fluent elements (e.g. background color or font color). If you make Fluent Design dynamic (see my other post here), then you can change everything at runtime and the properties (e.g. colors) look the same both for your own HTML elements and for the Fluent components used in the app.

pc