CODEWITHSUNDEEP
c#cssblazormudblazor
Stefan
Stefan

Reputation: 25

C# MudBlazor MudThemeProvider not initially applying to top-row in MainLayout

I've been experimenting around a lot with the MudBlazor Library lately. I'm pretty happy with it and considering to use it in my next project. But currently I have a issue that confuses me.

To make the issue easier replicable, I created a new and clean demo solution in Blazor WASM ('ASP.NET Core Hosted' checkbox checked). In the client sided project, I installed the default MudBlazor Package and made all relevant code additions according to the documentation to make the library work.

I added the relevant MudTheme-Code to the MainLayout.razor-File, which in simplified terms currently looks like this:

@using MudBlazor;

@inherits LayoutComponentBase

<MudThemeProvider @ref="@_mudThemeProvider" IsDarkMode="true" />

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

@code {
    private MudThemeProvider _mudThemeProvider;
}

Now the issue is that the DarkMode of the MudTheme works as intended, but only for the content inside the MainBody. The top-row (which I want to use as a header row for additional features) doesn't initially get applied after loading the page:

enter image description here

So I've tried to comment out the background-color line in the .top-row class of the MainLayout.razor.css-File, which doesn't seem to change anything, even after restarting the application.

enter image description here

Only when changing a line in the MainLayout.razor.css-File (even if it is just a comment) while the background-color line is also removed, then the top-row will also be in the dark-mode. enter image description here

I can only guess why the application behaves like that. I've tried several ideas and googled around, but I wasn't able to find a solution for this.

So my two questions here are:

  1. Why does the dark-theme have a conflict with the white background color in the css of the top-row, but not the rest of the application (body content of all pages)?
  2. Why does the dark-theme not get applied to the top-row, unless I make a change in the MainLayout's css-File, even if it just a comment? What can I do to get the dark theme working after the initial rendering?

Let me know if you need any additional files or code from the solution.

Thanks!

Upvotes: 0

Views: 1491

Answers (2)

user1791422
user1791422

Reputation: 41

In one of my Blazor Standalone projects I started with the default Bootstrap based Blazor project and added MudBlazor manually. The boostrap css was hanging around and causing the background to not honor the MudThemeProvider.

Upvotes: 0

RafBorrelli
RafBorrelli

Reputation: 266

This seems to me a cache problem.
You have several options:

Upvotes: 1

Related Questions