Blazor Server侧边栏导航：选中子菜单变色及图标修改求助

我在Blazor Server应用中使用了示例项目的侧边栏导航，前两个菜单无下拉子菜单（不可展开），第三个菜单带有可展开的子菜单。默认设置下，前两个菜单选中时会变为红色，但第三个菜单的子菜单选中时无此效果。同时我还有两个具体问题：

1. 需在CSS中修改或添加什么设置，才能让选中的子菜单也变为红色？（site.css的nav-link类无相关定义）
2. 如何修改菜单旁的home图标？

用到的代码如下：

<NavLink class="nav-link"   href="logs" Match="NavLinkMatch.Prefix">
  <span class="oi oi-home" aria-hidden="true"></span> Error Log
</NavLink>

<NavLink class="nav-link" href="connect2" Match="NavLinkMatch.All">
  <span class="oi oi-home" aria-hidden="true"></span> Connect
</NavLink>


<NavLink class="nav-link" Match="NavLinkMatch.All" @onclick="()=>expandSubNav =   !expandSubNav">
  <span class="oi oi-home" aria-hidden="true"></span> Windows WMI
</NavLink>

@if (expandSubNav)
{

<NavLink class="" href="wmi_general">
    <span class="sub_menu">General</span>
</NavLink>
<br>

<NavLink class="" href="wmi_eventlog">
    <span class="sub_menu">EventLog</span>
</NavLink>
<br>

<NavLink class="" href="wmi_programs">
    <span class="sub_menu">Programs</span>
</NavLink>
}

问题1：实现选中子菜单变红 #

Blazor的NavLink组件匹配当前路由时，会自动添加active类。主菜单的红色是因为.nav-link.active有对应的颜色样式，但你的子菜单NavLink没加nav-link类，且用了自定义的sub_menu类，所以需要补充样式：

步骤1：给子菜单的NavLink加基础类 #

先修改子菜单的NavLink，加上nav-link或者自定义类，比如：

<NavLink class="nav-link sub-nav" href="wmi_general">
    <span class="sub_menu">General</span>
</NavLink>

步骤2：添加CSS规则 #

在site.css里加入以下代码，颜色值可以和主菜单选中时保持一致（可以用浏览器开发者工具查看主菜单的红色代码）：

/* 子菜单选中时的红色样式 */
.sub-nav.active .sub_menu {
    color: #dc3545; /* 替换成你主菜单的红色值 */
}

/* 如果不想加自定义类，也可以直接匹配 */
.nav-link.active .sub_menu,
a.active .sub_menu {
    color: #dc3545;
}

问题2：替换菜单图标 #

你当前用的是Open Iconic图标库的oi-home类，替换图标只需要更换对应的类名：

用Open Iconic内置图标 #

直接把oi-home换成目标图标类，比如：

• 日志图标：oi oi-list-rich
• 连接图标：oi oi-connectdevelop
• Windows窗口图标：oi oi-window-maximize

示例修改：

<NavLink class="nav-link" href="logs" Match="NavLinkMatch.Prefix">
  <span class="oi oi-list-rich" aria-hidden="true"></span> Error Log
</NavLink>

用自定义图标 #

如果要使用自己的SVG图标，直接替换span标签为SVG代码或图片：

<NavLink class="nav-link" href="logs" Match="NavLinkMatch.Prefix">
  <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
    <!-- 这里放入你的SVG路径代码 -->
    <path d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3H1V3zm0 4h14V7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v0zm0 3h14v-3H1v3zm0 4h14v-3H1v3z"></path>
  </svg> Error Log
</NavLink>

内容的提问来源于stack exchange，提问作者Mdarende