Multiple App.Razor components

Question

Hello,

Is it possible to have an additional App.razor file that I can use for e.g. Admin area only?

Currently, if I create a new folder named Admin and create a new layout there, it inherits from the existing App.razor and linked css files.

Basically, I need to have separate css files in the admin area.

Thank you!

Answer 1

Blazor use a single component tree. The app component is the root node, of which there can only be one. As for css, there is only one browser instance, so css by definition is shared with all components. Blazor components support “isolation” css by prefixing all class references with a unique selector.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-9.0

I assume you want admin to look like a new page. In that case the admin pages should reference their own layout.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/layouts?view=aspnetcore-9.0#apply-a-default-layout-to-an-app

Answer 2

Is it possible to have an additional App.razor file that I can use for e.g. Admin area only?

No

You may try load css file based on area in app.razor

@if (.....)
    {
        <link rel="stylesheet" href="......."/>
        
    }
    else
    {
        <link rel="stylesheet" href="......."/>
    }

.....

@code{
    
    [CascadingParameter]
    HttpContext? context{ get; set; }

}

when you navigate to components in another area,you need a full page reload

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Ruikai Feng