Why does Mudblazor component appear without css?

Question

I have installed mudblazor through NuGet and followed the "tutorial" on how to set up mudblazor, I did everything step by step but for some reason the component appears without any css or js. I had to link a css and js file in _host.cshtml:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>

but the problem is that it still doesn't seem to work.

Stearne

> doesn't seem to work Please elaborate on what you've tried vs what you expected – Acidulous

Well I already said, I did what anyone would do when they want to get mudblazor in their project. I added the package through nugget, added the imports, added the css and js references which are above, registered the services and added the components. And I expected... well ... for it to work. What happens is that the components just appear like plain html without any css or js (animations) and its not only for mudblazor but for any components provider including syncfusion – Anodize

@AudriusŠaučiūnas have you tried with the MudBlazor.Templates which Porkopek linked in his answer? – Jeavons

Answer 1

Try to clone a MudBlazor template from github, https://github.com/Garderoben/MudBlazor.Templates, it should work out of the box, with all pre-requisites installed. If not, there is something wrong in your environment

Inattention

Answer 2

In program.cs there is a missing instruction.

add the following line before builder.build() is called.

StaticWebAssetsLoader.UseStaticWebAssets(builder.Environment, builder.Configuration);

I spotted the discrepancy here: https://github.com/MudBlazor/Templates/blob/dev/src/.template.base/server/Program.cs#L9

Datha

I am unsure why my new project needed this. My new project had no mvc stuff in the startup where as my previous projects did, but this is only speculation. – Datha

Answer 3

Create a razor component named _Imports in the folder of your pages and add the following: @layout MainLayout In your MainLayout you should have: <MudThemeProvider/> <MudDialogProvider/> <MudSnackbarProvider/>

Circumscribe

Answer 4

Empty your browser cache and do a hard reload (press F12 in Chrome, then right-click on the reload icon and select "Empty cache and hard reload"). This will get the new client-side css and js content loaded in your Blazor WASM client.

Madore

Answer 5

Incase anybody encouncer this issue in production environment, the above solutions did not work for me.

This is what works for me, first publish your app to folder then open the published wwwroot folder to copy the _content folder to production.

if MudBlazor works on development then the _content folder contains the MudBlazor files.

Gene

Answer 6

Make sure you set your base href like below:

<base href="/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

Strangeness

Answer 7

If you are using dotnet 8or any other version for that matter make sure this is in your App.razor file

<base href="/" />
<link href="https://font`enter code here`s.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

Kirkpatrick

Answer 8

If anyone is having this issue in .net8 after you have followed the Get started guide on the mudblazor website, @philu's answer fixed it for me

• Load the project
• Press F12
• In the top left, right click the refresh button
• Hard refresh

Alternatively, use the shortcut

CTRL + SHIFT + R

Civic