如何通过CSS设置更改Blazor中NavLink的文本颜色

Question

我正试图弄清楚如何通过CSS设置更改Blazor应用程序的文本颜色。

作为一个实验，我在Visual Studio 2019中创建了一个新的(默认(Blazor WebAssembly应用程序。然后我试图更改左侧导航元素的测试颜色，但无论我修改哪个CSS文件，我似乎都没有得到正确的效果。

相关的Razor标记如下(在NavMenu.Razor中(：

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

它在HTML中呈现如下：

<li class="nav-item px-3" b-qdt7h34qew="">
<!--!-->
<a href="fetchdata" class="nav-link">
<!--!-->
<span class="oi oi-list-rich" aria-hidden="true" b-qdt7h34qew=""></span> Fetch data
</a>
</li>

两种我都试过了

.nav-item { color: orange; }

和

.nav-link { color: orange; }

在NavMenu.razor.css或css/app.css文件中，但似乎都不起作用。

设置此css设置的正确方法是什么，以便文本"获取数据"显示为橙色文本？

Answer 1

您可以使用：：deep选项修改NavMenu.razor.css中的样式，由于css隔离结合了应用程序css，因此您可以清理应用程序并重新生成以检查您的更改。

.nav-item ::deep a {
color: orange;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}

谨致问候，Sridhar N

Answer 2

您必须使用::deep

.nav-item ::deep a {
color: orange;
}

NavMenu.razor.css中的现有值

.nav-item ::deep a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}