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