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.

> doesn't seem to work Please elaborate on what you've tried vs what you expected — Quango
– Quango, Commented Dec 6, 2020 at 16:33
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 — Audrius Šaučiūnas
– Audrius Šaučiūnas, Commented Dec 6, 2020 at 16:57
@AudriusŠaučiūnas have you tried with the MudBlazor.Templates which Porkopek linked in his answer? — henon
– henon, Commented Dec 31, 2020 at 16:15

PBo · Accepted Answer · 2022-06-29 05:10:04Z

7

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

answered Jun 29, 2022 at 5:10

PBo

5296 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PBo Over a year ago

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.

Emir Jasarevic · Accepted Answer · 2021-07-22 20:41:45Z

4

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/>

answered Jul 22, 2021 at 20:41

Emir Jasarevic

811 silver badge4 bronze badges

Comments

Porkopek · Accepted Answer · 2020-12-06 22:22:39Z

3

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

answered Dec 6, 2020 at 22:22

Porkopek

1,03212 silver badges22 bronze badges

Comments

philu · Accepted Answer · 2021-09-05 03:35:09Z

3

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.

answered Sep 5, 2021 at 3:35

philu

8761 gold badge9 silver badges17 bronze badges

Comments

muhdamean · Accepted Answer · 2023-01-18 11:38:15Z

1

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.

edited Jan 18, 2023 at 11:38

answered Jan 18, 2023 at 11:24

muhdamean

912 silver badges12 bronze badges

Comments

user14825471 · Accepted Answer · 2020-12-14 18:42:05Z

0

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" />

answered Dec 14, 2020 at 18:42

user14825471

1

Comments

bharathch1 · Accepted Answer · 2024-03-01 12:21:44Z

0

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" />

answered Mar 1, 2024 at 12:21

bharathch1

111 bronze badge

Comments

Stuart Aitken · Accepted Answer · 2024-10-15 19:00:44Z

0

In my case I had a new project using the MudBlazor IntereactiveAuto template set to per page/component.

The styling was there but only for basics like padding. The text was as plain as can be.

Fixed by adding <MudThemeProvider/> in MainLayout.

answered Oct 15, 2024 at 19:00

Stuart Aitken

1,0121 gold badge17 silver badges32 bronze badges

Comments

Michael Crimes · Accepted Answer · 2024-06-17 18:07:46Z

-1

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

answered Jun 17, 2024 at 18:07

Michael Crimes

11 bronze badge

Collectives™ on Stack Overflow

Why does Mudblazor component appear without css?

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Related