Why are my CSS classes not updating in Blazor WASM?

Question

I'm trying to change the class of a <span> element based on a bool. I'm saving the value of the bool in the localstorage and the Console.WriteLine shows me that SidenavClass gets the correct value (class name). However, it does not update in the HTML. The classname doesn't get added to the <span> element.

I also tried using StateHasChanged(), his doesn't seem to work.

It's a component in a component, in a component.
ProductCategoriesNavMenu.razor inside NavMenu.razor inside MainLayout.razor

Can someone help me figure out why it's not updating the classname in the HTML?

ProductCategoriesNavMenu.razor

@foreach (var productCategory in ProductCategoryDtos)
    {
        var link = "ProductsByCategory/" + productCategory.Id;

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="@link">
                <span class="@productCategory.IconCSS"></span><span class="@SidenavClass">@productCategory.Name</span>
            </NavLink>
        </div>
    }

<div class="@SidenavClass">TEST</div>

@code {
    public bool collapsedMenu { get; set; }
    public string SidenavClass => collapsedMenu ? "collapsed-sidenav" : "";


    public async Task CollapseMenuToggler()
    {
        await Task.Delay(500);
        collapsedMenu = await LocalStorage.GetItemAsync<bool>("Menu Collapsed");
        Console.WriteLine("collapsedMenu: " + collapsedMenu + ", Class: " + SidenavClass);
        StateHasChanged();
    }
}

NavMenu.razor

<ProductCategoriesNavMenu/>

@code {
    public static string Class = "collapsed-sidenav";

    [Parameter] public EventCallback<bool> CollapseSidebarEvent { get; set; }

    public void CollapseMenu(MouseEventArgs e)
    {
        collapsedSidenav = !collapsedSidenav;
        LocalStorage.SetItemAsync<bool>("Menu Collapsed", collapsedSidenav);
        if(collapsedSidenav)
        {
            LocalStorage.SetItemAsync<string>("Collapse Class", Class);
        }
        else
        {
            LocalStorage.SetItemAsync<string>("Collapse Class", "");
        }
        CollapseMenuToggler();
        CollapseSidebarEvent.InvokeAsync(collapsedSidenav);
    }
}

MainLayout.razor

<NavMenu CollapseSidebarEvent="(e)=>SidenavCollapsedHandler(e)" />

Does your style happen to be in an isolated component style sheet, like "componentname.razor.css"? In that case, it does not work that easily because the compiler is adding some auto generated key to class names in order to differentiate the styles of different components. — noel, Dec 07 '22 at 10:56
I don't get how you are calling `CollapseMenuToggler()` defined in `ProductCategoriesNavMenu` from `NavMenu` the way you are doing, but if it is supposed to be the same method, you should `await` an `async Task` method. — T.Trassoudaine, Dec 07 '22 at 10:58
that's not the part of the question, but why do you store `Menu Collapsed` in local storage? You can use cascading parameters or put it in a service — theemee, Dec 07 '22 at 10:59

Why are my CSS classes not updating in Blazor WASM?

0 Answers0