MudBlazor: Css in isolated files do not apply.

Sure, it is okay, CSS isolation works for other components for example <button></button> but not for MudBlazor components.

I discovered a similar question on Stackoverflow and answered with what I learned from you guys. Hope it is all correct, if not, please let me know.

Important does not help, when I do in with Style=“…”, it works fine, also when I add the same style with html <style></style> tag, it works.

In this case the rule gets applied to the div, but I need to override mud-blazor styles. For example I would like to have nav-items text in white, here is my CSS

.mud-nav-link-text {
    color: white !important;
}

This does not work in NavMenu.razor.css file, when I put navigation component, b-5fjnqwri5o applies to my div element, but the text color does not change.

Please try this:

::deep .mud-nav-link-text {
    color: white !important;
}

@aspramsh , try to use ::deep after you class declaration:

::deep .mud-button-text { color: black; }

It worked for me.

Special thanks for @zHaytam for the help.

Tried here and can’t get it working either on MudButton, but if I change the last attribute on MudButton manually it works:

---

To:

==================

By the moment, I suggest you use MudThemeProvider and customize the colors. Example: https://mudblazor.com/customization/theming/overview

I know @Garderoben thinks our documentation should not be a “How-To-Blazor-Wiki” but I would make an exception for this and document it (i.e. under Customization) for future reference because I have seen it comes up many times on the chat and we can then simply post the url of the page.

@HClausing that helped, thank you.