CODEWITHSUNDEEP
cssblazor
Manuel Zelenka
Manuel Zelenka

Reputation: 1634

Set ActiveClass via style isolation

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?

Upvotes: 0

Views: 523

Answers (1)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30036

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.

Upvotes: 1

Related Questions