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

Question

为了重现这个问题，我创建了一个 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>

然后将该组件包含到 NavMenu 文件中

<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;
    }
}

然后输出是

我认为asp.net core 3.1中不存在这个问题

似乎如果我将内容包装到组件中，CSS 样式将停止工作。

但是当我升级到 .net 5 时，这个问题开始显示破坏了我之前制作的模板

造成这种情况的原因是什么？有办法解决吗？

谢谢！

Answer 1

这是CSS隔离的结果。如果您希望 NavLink 组件具有相同的外观，则必须创建一个与组件同名的 .css 文件，并在其中包含导航链接的样式。这些样式可以在当前的 NavMenu.razor.css 中找到。或者，如果您希望其中的样式适用于子组件，则必须使用::deep 组合器。

MenuItemComponent.razor.css（这是从 剪切和粘贴的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; }

另一种解决方案是修改NavMenu.razor.css而不使用上述 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;
    }
}