Blazor<navlink> 作为组件包含时样式停止工作</navlink>

Question

To reproduce this issue, I created a MenuItemComponent

<li class="nav-item px-3">
    <NavLink class="nav-link" href="fetchdata">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
    </NavLink>
</li>

and then included the component to the NavMenu file

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">Porcellus</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
        <MenuItemComponent></MenuItemComponent>
    </ul>
</div>

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

And then the output is

I don't think this issue exists in asp.net core 3.1

It seems that if I wrap contents into a component the css styles will stop working.

But when I upgraded to .net 5 this issue starts showing destroying the templates I made earlier

What is the cause of this and is there a way to fix this?

Thanks!

Answer 1

This is a result of css isolation. If you want you NavLink component to have the same look you have to create a.css file with the same name as the component with the styles for the navlink in it. The styles can be found in the current NavMenu.razor.css. Alternately if you want the styles from there to work on sub components you have to use the ::deep combinator .

MenuItemComponent.razor.css (This was cut & pasted from NavMenu.razor.css )

.oi {
  width: 2rem;
  font-size: 1.1rem;
  vertical-align: text-top;
  top: -2px; }

.nav-item {
  font-size: 0.9rem;
  padding-bottom: 0.5rem; }

.nav-item:first-of-type {
  padding-top: 1rem; }

.nav-item:last-of-type {
  padding-bottom: 1rem; }

.nav-item ::deep a {
  color: #d7d7d7;
  border-radius: 4px;
  height: 3rem;
  display: flex;
  align-items: center;
  line-height: 3rem; }

.nav-item ::deep a.active {
  background-color: rgba(255, 255, 255, 0.25);
  color: white; }

.nav-item ::deep a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white; }

The alternative solution is to modify NavMenu.razor.css and not use the above css.

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand {
    font-size: 1.1rem;
}

::deep .oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

::deep .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

::deep .nav-item:first-of-type {
    padding-top: 1rem;
}

::deep .nav-item:last-of-type {
    padding-bottom: 1rem;
}

::deep .nav-item a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

::deep .nav-item a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

::deep .nav-item a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}