css - 如何通过 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 { 颜色:橙色； }

和

.nav-link { 颜色:橙色； }

在 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;
}

问候，斯里达尔·N