如何移除MudNavLink组件中的下划线？

你遇到的问题是因为MudBlazor的MudNavLink组件自带CSS样式优先级高于你设置的内联text-decoration:none，尤其是链接处于激活（active）状态时，组件会自动应用额外样式，导致内联设置失效。可以试试以下几种解决方法：

方法1：自定义CSS类（推荐） #

在全局样式文件（比如wwwroot/css/app.css）或组件的隔离样式文件（.razor.css）中添加自定义类：

.no-nav-underline .mud-nav-link-text,
.no-nav-underline.active .mud-nav-link-text {
    text-decoration: none;
}

然后在MudNavLink上应用这个类：

<MudNavLink Href="Account/Register" Class="no-nav-underline" Match="NavLinkMatch.Prefix" Icon="fa-solid fa-registered">Register</MudNavLink>
<MudNavLink Href="Account/Login" Class="no-nav-underline" Match="NavLinkMatch.Prefix" Icon="fa-solid fa-right-to-bracket">Login</MudNavLink>

这个方法能同时覆盖默认状态和激活状态的下划线样式，且不会影响其他组件。

方法2：使用CSS变量直接覆盖 #

MudBlazor提供了内置CSS变量来控制链接样式，你可以直接通过内联样式修改：

<MudNavLink Href="Account/Register" Style="--mud-nav-link-text-decoration: none; --mud-nav-link-active-text-decoration: none;" Match="NavLinkMatch.Prefix" Icon="fa-solid fa-registered">Register</MudNavLink>

通过--mud-nav-link-text-decoration和--mud-nav-link-active-text-decoration两个变量，分别控制默认和激活状态的下划线样式。

方法3：组件隔离场景下的深度选择器 #

如果你的组件启用了CSS隔离，需要用::deep穿透组件样式，在组件的.razor.css文件中添加：

::deep .mud-nav-link-text {
    text-decoration: none;
}
::deep .mud-nav-link.active .mud-nav-link-text {
    text-decoration: none;
}

添加后无需修改MudNavLink的属性，就能移除当前组件内所有MudNavLink的下划线。

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