How to change the text color in Blazor via CSS setting

user_33272 0
Viewed 2705

I am trying to figure out how I can change the text color for a Blazor application via CSS setting.

As an experiment, I creating a new (default) Blazor WebAssembly application in Visual Studio 2019. Then I am trying to change the test color of the navigation elements on the left-hand side, but no matter which CSS file I am modifying I don't seem to get the correct effect.

The relevant Razor markup looks like this (in 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>

which renders in HTML like this:

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

I have tried both

.nav-item { color: orange; }

and

.nav-link { color: orange; }

in either the NavMenu.razor.css or the css/app.css file but neither seems to work.

What is the correct way to set this css setting so the text 'Fetch data' appears as an orange text?

blazor-webassembly blazor css
2 Answers

You can modify the styles in NavMenu.razor.css with ::deep option and since CSS isolation combines the application CSS, you clean the application and rebuild to check for your changes.

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

Regards, Sridhar N

user_12712790

You have to use ::deep

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

The existing value in NavMenu.razor.css

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