Search code examples
csshrefrazor-pagesasp.net-core-tag-helpers

CSS are not applied to asp-page tag in razor pages

It's .NET6 razor pages project and I use VS2022.

This is in _Layout.cshtml.

<ul class="list-unstyled ml-2">
    <li>
        <a href="/TEST">TEST</a>
        <a asp-page="TEST/Index">TEST1</a>
    </li>
    ...

There are 2 anchor tag in nav bar but css in _Layout.cshtml.css is not applied to one with asp-page tag due to no attribute "b-l76pcumf24"

enter image description here

Could anyone explain why and how to make it work with asp-page tag helper?

Thanks

Solution

  • CSS isolation is a build time feature. Tag helper output is generated at runtime, so they cannot support the CSS isolation feature. This is by design.

    Set your own href attribute, like in your first link, and don't apply any custom asp-* attributes to the anchor.