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

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 设置以使文本 'Fetch data' 显示为橙色文本的正确方法是什么？

Answer 1

你必须使用::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;
    }

Answer 2

您可以使用 ::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

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

How to change the text color in Blazor via CSS setting

css

blazor

blazor-webassembly