How to add a different CSS to a razor page in Blazor WASM?

Cenk 981 Reputation points
2024-06-04T13:24:09.7766667+00:00

I am working on a Blazor WASM e-commerce application using the .NET 6 old version with a default template. I want to add a new razor page with a different look while keeping the old ones in the project. How can I achieve this? Specifically, I want to add a new page with custom CSS and JavaScript, without affecting the existing pages. Can you guide me on how to do this step by step? Thank you.

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,300 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,458 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Karen Payne MVP 35,286 Reputation points
    2024-06-04T21:02:00.1466667+00:00

    Consider using CSS isolation

    0 comments No comments

  2. Bruce (SqlWork.com) 59,306 Reputation points
    2024-06-05T00:39:45.18+00:00

    you need to be careful. a Blazor app (server or WASM) is a spa. pages are not really pages, they are dynamic html. this means every referenced css and javascript file stays loaded. if you load two different css framework, they may have conflicting styles. javascript frameworks may also have conflicting functions, or worse conflicting dependencies.

    CSS isolation and inline style can help, but don't handle framework conflicts. if you write the javascript, be sure to use a namespace for the new page(s).