Set ActiveClass via style isolation

Question

Imagine the following NavigationMenuItem component:

@inherits NavLink

<div>
    <NavLink ActiveClass="navigationmenuitem-active" @attributes="@AdditionalAttributes">
        @ChildContent
    </NavLink>
</div>

I want to be able to set the ActiveClass attribute of the NavLink via style isolation.

Is this somehow possible?

I got the style to work when defining the class for the ActiveClass globally but I don't really like having global styles.

I found a workaround by not using the ActiveClass attribute and instead going with ::deep a.active in the isolated css file. But this feels wrong.

So is there a way where I can use ActiveClass the way I intend it to?

By Isolation I'm assuming you mean Blazor component CSS. I set the active class on the out-of-the-box NavMenu elements as follows ActiveClass="nav-link-active" and then added to the component css class ::deep .nav-link-active { background-color:blueviolet;} It worked - lurid purple when active. I'm assuming you understand ::deep. — MrC aka Shaun Curtis
@ShaunCurtis that works like a charm. I feel stupid for not thinking about applying ::deep on the class itself. It makes so much sense! If you'd provide your comment as an answer I'll accept it! — Manuel Zelenka

MrC aka Shaun Curtis MrC aka Shaun Curtis · Accepted Answer · 2021-03-02T09:46:03

Using Blazor Isolation CSS on the component. Set:

<NavLink ActiveClass="nav-link-active" .....>

Then this in the component CSS for the menu component :

::deep .nav-link-active { background-color:blueviolet;}

This makes the active link lurid purple.

::deep tells Blazor component rendering to apply the style down the tree to all child components. <NavLink> is a child-component and not part of the menu component HTML. See MS Docs information for more information.

Set ActiveClass via style isolation

1 Answers