css - Blazor 样式在作为组件包含时停止工作

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