Links created from NavLink are not styled from css isolation file

[gregoryagu]

Describe the bug

Links created from NavLink are not styled from css isolation file

To Reproduce

Create a new Blazor Server App.

Add this html to index:

<p>
    <NavLink href="http://microsoft.com">Test Link Which is not styled from index.razor.css as it should be</NavLink>
</p>

<p>
    <a href="http:/microsoft.com">Test link which IS styled correctly</a>
</p>

Create Index.razor.css and add this style:

a{
    color: aqua
}

Run the app. The first one is incorrectly styled, the second one is correctly style.

This is the generated HTML:

<a href="http://microsoft.com">Test Link Which is not styled from index.razor.css as it should be</a>

<a href="http:/microsoft.com" b-bb2jwcaddy>Test link which IS styled correctly</a>

Note that the first one does not have b-bb2jwcaddy. If this is added, then it is correctly styled.

I am using VS 16.8.0 Preview 6

[mkArtakMSFT]

Thanks for contacting us.
The following docs may help you with getting what you want working: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#child-component-support

Note, the use of the ::deep combinator.

[gregoryagu]

Thank you. By adding the ::deep and also adding a div, it works as expected:

::deep a{
    color: aqua
}

<div>
    <p>
        <NavLink href="http://microsoft.com">Test Link Which is not styled from index.razor.css as it should be</NavLink>
    </p>

    <p>
        <a href="http:/microsoft.com">Test link which IS styled correctly</a>
    </p>
</div>