Blazor CSS Isolation for NavLink

[Liero]

I'm not sure whether it is by design or it is a bug, but I've changed:

<a href="counter" class="btn btn-link">Counter</a>

to

 <NavLink href="counter" class="btn btn-link">Counter</NavLink>

and the local css rule stopped working:

index.razor.css

.card-body .btn {
    width: 100%;
}

It's different from what I know in Angular

[Ariansh]

css styles are scoped in blazor since preview 8 I think. so in order to give style to a component from its parent, you should use ::deep .card-body{}

[Ariansh]

https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-preview-8/#css-isolation-for-blazor-components

[ghost]

Facing the same issue. Seems like NavLink is not generating the attribute used for CSS Isolation.

NavLink: <NavLink class="nav-link" href="" Match="NavLinkMatch.All"></NavLink>
Translates to: <a href="" class="nav-link active">...</a>

Whereas for other elements:
From: <li class="nav-item px-3"></li>
Traslates to: <li class="nav-item px-3" b-py5pe8i3qq=""></li>
Notice the auto generated attribute b-py5pe8i3qq is not appearing in NavLink.

Workaround is wrap the elements in a div and target the div instead.

[Ariansh]

have you created a relative razor.css file? for example NavMenu.razor.css .
if you do don't it should read styles from your app.css files and since there is not scoped css file, why should it generate the token?

[ghost]

Yes, I did, will move that to app.css but may I know if there's any reasons of why it's designed as such?

[Ariansh]

Component specific CSS styles make it easier to reason about the styles in your app and to avoid unintentional side effects from global styles

as the Daniel described in the above link, it is here to prevent conflict with global styles. for example in case you have a class .Title{color : red;} in your global style file, it will be applied to every element with class Title. but what if you have two styles with the same name in an app? (don't tell you haven't seen that...) or you just want a component to take this style and the rest should take another? so you don't have to watch over every Title Css class everywhere.

[ghost]

Yes, I understand why CSS Isolation is needed. But, why is it not applied for NavLink, too?

[Liero]

@jozhuatwx: It's because <NavLink class=".."> element is not rendered to HTML (unlike in Angular, where it it always rendered). NavLink itself produces some markup, in this case just a singe html element, but those elements are in different scope.

[Ariansh]

just to make this easier. because NavLink is a blazor component. and it has its own scoped style. so in order to give it an style from a parent, you should use ::deep