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

Cenk 986

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.

2 answers

Karen Payne MVP 35,286 Reputation points

2024-06-04T21:02:00.1466667+00:00

Consider using CSS isolation
Please sign in to rate this answer.

0 comments No comments
Sign in to comment
Bruce (SqlWork.com) 59,556 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).
Please sign in to rate this answer.
Cenk 986 Reputation points

2024-06-05T19:04:37.69+00:00

I created an empty SampleLayout and added it under Shared folder beside the MainLayout.

@inherits LayoutComponentBase

I created a Test folder under Pages and added _Imports.razor having this inside of it.

@layout SampleLayout

Then added Home.razor page inside of the Test folder. Having page directive (@page "/Test/Home") and some markup with bootstrap. When I start the application and navigate to /Test/Home there is nothing displays and no error aswell.

Bruce (SqlWork.com) 59,556 Reputation points

2024-06-05T22:26:34.9833333+00:00

the Router component is responsible for determining the layout and rendering it. does your SampleLayout have and @Body to render the page component?

Cenk 986 Reputation points

2024-06-06T04:00:33.4266667+00:00

yes, you are right. Adding @Body to the new layout makes the page displayable. How to add related CSS and JS files (jQuery, slick) in wwwroot to this new razor page?

Cenk 986 Reputation points

2024-06-06T04:06:03.53+00:00

The example page has those files which I have added under wwwroot.

<head> <title>Zay Shop eCommerce HTML CSS Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="assets/img/apple-icon.png"> <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico"> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/templatemo.css"> <link rel="stylesheet" href="assets/css/custom.css">  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap"> <link rel="stylesheet" href="assets/css/fontawesome.min.css"> </head> ...  <script src="assets/js/jquery-1.11.0.min.js"></script> <script src="assets/js/jquery-migrate-1.2.1.min.js"></script> <script src="assets/js/bootstrap.bundle.min.js"></script> <script src="assets/js/templatemo.js"></script> <script src="assets/js/custom.js"></script> 

Bruce (SqlWork.com) 59,556 Reputation points

2024-06-06T15:39:18.8966667+00:00

this is a poor design. every time the user navigates to the page, the browser is reloading the same css and javascript files and may cause issues with the files are not designed to be loaded more than once per page.

this should be moved to the app.razor page. as I stated, once loaded, these styles and js functions are available on all pages, so they should only be loaded once.

note: css isolation also uses bundling, for all the Blazor pages that use it, only one css file is loaded in app.razor. just css scoping is used.

Blazor pages are html fragments. they should not load css or javascript files, except in very special cases, then should have code to prevent duplicate loads.

Cenk 986 Reputation points

2024-06-06T16:52:23.1066667+00:00

How to add JS and CSS to App.razor? I can dynamically change the layout but don't understand how to add into App.razor?

@inject NavigationManager manager <Router AppAssembly="@typeof(App).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="GetLayoutType()" /> <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> @code{ private Type GetLayoutType() { var relativePath = manager.ToBaseRelativePath(manager.Uri); if (relativePath.StartsWith("Home")) { return typeof(SampleLayout); } else { return typeof(MainLayout); } } }

Bruce (SqlWork.com) 59,556 Reputation points

2024-06-06T18:18:08.2733333+00:00

sorry, with standalone Blazor WASM template, you update the index.html file. server hosted templates moved the code to app.razor.

Cenk 986 Reputation points

2024-06-11T19:10:36.8733333+00:00

I wonder if there is a way to only apply specific CSS files for a specific razor page? If so how? Let's say I just want Bootstrap and custom CSS files for Home.razor.

Bruce (SqlWork.com) 59,556 Reputation points

2024-06-11T20:00:28.92+00:00

once a css or js file is loaded, its loaded for the life of the Blazor app. use custom markup by page, by using a unique prefix for the classes. This is Blazor handles isolation.

remember a Blazor app is a single page with dynamic html to the browser.

Jerry Fu - MSFT 571 Reputation points Microsoft Vendor

2024-06-14T09:04:37.3+00:00

Hi @Cenk, if you want to change determine the css in "App.razor" , you could just put the css reference in a customlayout. And only the page using this customlayout will apply the css.

Bruce (SqlWork.com) 59,556 Reputation points

2024-06-14T15:53:15.5033333+00:00

no, this won't work. with Blazor, "navigating" to a new page does not unload any css files.

page1 -> loads myCss1.css

page2 -> loads myCss2.css

for page2 its the same as:

page2 -> loads myCss1.css -> loads myCss2.css

so you need to be sure the 2 css file styles do not conflict. also every time you navigate to a page more than once, you a reloading the css files that is already loaded.

for example:

if one css file has (even inline stylesheet):

p {color: red}

when you go to page 2, all <p> will be color red unless overriden. to get around this you use a namespace:

.css1 p {color: red}

and in the custom layout/page define the containing div with:

<div class="css1">
Sign in to comment

Share via

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

2 answers