V5.0 Blazor Server Theme and CSS Priority

Radzen.Blazor Components
1

Thank you for the update with v5.0. Outstanding and the dark/light mode works amazingly well. Using VS2022 Blazor Server .NET 8 (migrated from .NET 7). One thing I'm uncertain about is where to put this:

<RadzenComponents />
<RadzenTheme Theme="material3" @rendermode="RenderMode.InteractiveServer" />

I currently have it in my MainLayout.razor and the theme and my custom

full-modal-pre-v5-Radzen-no-theme-ref
full-modal-pre-v5-Radzen-no-theme-ref1500×970 22.7 KB

partial-modal-radzen-with-themev5
partial-modal-radzen-with-themev51503×607 17.9 KB

site.CSS works OK. But one issue involves a modal wait style that uses the circular progress animation. Where it previously covered the entire screen (intended) it now shows just on the small div that invokes it during an isBusy = true state. I've tried to adjust the z-index and nothing helps. I'm suspecting that the theme (applying Material3) takes precedence over my site.CSS. Here is the CSS I'm trying display over the full UI:

modal-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;  
}
.modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001; /* Ensure it's higher than the background overlay */
    border-radius: 10px;
    overflow: hidden; /* Keeps the edges rounded */
}

.modal-dialog {
    margin: 0;
    padding: 80px;
}

.modal-content {
    border-radius: 10px;
}

.modal-header {
    border-radius: 10px 10px 0 0;
}

I'm a licensee of Blazor Studio (which I used to bring the Material3 into VS2022) so I created a Blazor Server .NET 8 project to try and figure out where I reference the theme (also checked out the Radzen Github). Any suggestions would be appreciated.

2

Hi @DeveloperOldsmar,

As per the Get started guide in .NET 8 you have to add this code within the <head> element in App.razor. Try adding it before the link to site.css (presuming your custom styles are in site.css)

<head>
    ....
    <RadzenTheme Theme="material3" @rendermode="RenderMode.InteractiveServer" />
    <link rel="stylesheet" href="css/site.css" />
    ....
</head>
3

Yes, I saw that but my app.razor looks like the following:


<CascadingAuthenticationState>

    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">


            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1"  />

            </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
        
    </Router>
    
</CascadingAuthenticationState>

I tried applying via _host.cshtml but that didn't work (still phasing out Bootstrap)

@page "/"
@namespace docket2022.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using Microsoft.AspNetCore.Authorization
@attribute [AllowAnonymous]



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/site.css" />
   
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
    <script src="_content/BlazorInputFile/inputfile.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
    <script src="BlazorInterop.js"></script>
    <script src="_content/CurrieTechnologies.Razor.Clipboard/clipboard.min.js"></script>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>
1 Like
4

In the Radzen Github, for RadzenBlazorDemos.Server the App.razor includes:

    <RadzenTheme Theme="material3" @rendermode="InteractiveServer" />

and then you see some stylesheet references. But for RazdenBlazorDemos the App.razor looks like mine:

@*
    The Router component displays whichever component has a @page
    directive matching the current URI.
*@
    <Router AppAssembly="typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="typeof(MainLayout)">
                <RadzenText TextStyle="TextStyle.DisplayH1" TagName="TagName.H1" class="rz-my-12">
                    Page not found
                </RadzenText>
                <RadzenText TextStyle="TextStyle.DisplayH5" class="rz-my-12">
                    Sorry, but there's nothing here!
                </RadzenText>
            </LayoutView>
        </NotFound>
    </Router>

The only way it works (except site.css loses precedence) is adding:

    <RadzenTheme Theme="material3" @rendermode="RenderMode.InteractiveServer" />

to the MainLayout.razor. No theme is applied using this in App.razor:

<HeadContent>
    <RadzenTheme Theme="material3" @rendermode="RenderMode.InteractiveServer" />
 </HeadContent>

<CascadingAuthenticationState>

    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">


            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1"  />

            </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
        
    </Router>
    
</CascadingAuthenticationState>
1 Like
5

Your App.razor doesn't follow the .NET 8 application template as it was migrated. You have to add RadzenTheme before your site.css registration.

1 Like