1

I am trying to remove the track from the FluentUI Progress bar. I am only able to use this library so requesting an alternate is not an option.

I have attempted to add css to my application to overwrite, but I believe that any changes I make to the component are overwritten in lieu of the line inside my _Layout.cshtml

<script type="module" src="~/css/fluentui/web-components.min.js"></script>

How can I edit the following css within a component I want to use?

The child element within the progress bar that I want to edit css for

The child element class with style that I want to change

jcridd
  • 65
  • 8

1 Answers1

1

It turns out that you must use design tokens to alter css for FluentUI components. I saw that the component uses a variable in css called --neutral-stroke-strong-rest and was able to look at the docs here.

In order to get this to work you must perform all the setup from the docs, then in your razor page add your component with a reference for the .cs code

<FluentProgress @ref="ref1"></FluentProgress>

Then in the .cs code I needed to add:

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

private FluentProgress? ref1;

Then I needed to add the following function to change the actual CSS variables using JS (read more docs for info on this)

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await neutralStrokeStrongRest.SetValueFor(ref1.Element, "#FFFFFF".ToSwatch());

        StateHasChanged();
    }
}

And BOOM, no more track on my progress bar!

jcridd
  • 65
  • 8