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

【问题标题】：How to change the text color in Blazor via CSS setting如何通过 CSS 设置更改 Blazor 中的文本颜色
【发布时间】：2021-03-08 23:15:45
【问题描述】：

我试图弄清楚如何通过 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 设置以使文本“获取数据”显示为橙色文本的正确方法是什么？

【问题讨论】：

.nav-item .nav-link {color:orange}

标签： css blazor blazor-webassembly

【解决方案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

【讨论】：

【解决方案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;
    }

【讨论】：