Blazor左侧含嵌套子菜单的导航栏如何调整菜单项间距且不修改默认CSS

解决方案 #

提供两种完全不修改全局默认CSS、仅作用于当前导航菜单组件的实现方案：

方案1：使用Blazor组件CSS隔离（推荐，可维护性更高） #

1. 在你的导航菜单组件同级目录下，新建和组件同名的样式文件，比如你的组件叫NavMenu.razor，就新建NavMenu.razor.css，Blazor会自动对这个文件里的样式做组件级隔离，不会影响其他任何组件。
2. 给所有子菜单项的li标签新增一个自定义类名，比如submenu-nav-item：

<li class="nav-item px-5 submenu-nav-item">
    <!-- 子菜单NavLink内容 -->
</li>

3. 在NavMenu.razor.css中添加以下样式，调整上下内边距压缩间距，数值可以根据视觉效果自行调整：

.submenu-nav-item .nav-link {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    margin: 0 !important;
}

方案2：行内样式（无需额外文件，修改更直接） #

直接在子菜单的NavLink标签上添加style属性，自定义上下间距，仅对当前元素生效：

<NavLink class="nav-link" style="padding-top: 3px; padding-bottom:3px; margin:0;" 
         @onclick="() => ToggleNavMenu()" href="counter">
    <span aria-hidden="true"></span> New Incoming Notification
</NavLink>

两种方案都不会修改Bootstrap或Blazor自带的全局默认CSS，不会对其他组件样式产生影响，可以根据使用习惯自行选择。

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