MudBlazorをBlazorWebAssemblyで使う準備

Posted at 2024-07-08

MudBlazorをBlazorWebAssemblyで使うにも、事前に準備がいるので、それをまとめておきます。

前提

VisualStudio2022
BlazorWebAssembly
.net8
MudBlazor Ver6.21 (7.0ではうまくいかない…涙)

_Imports.razorに追記

_imports.razor

@using MudBlazor // 追加

wwwrootにある「index.html」に追記

index.html

<head>
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> <!--追加-->
</head>
<body>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script> <!--追加-->
</body>

Program.csに追記

Program.cs

using MudBlazor.Services; // 追加

builder.Services.AddMudServices(); // しかるべき行の後に追加

MainLayout.razorに追記

MainLayout.razor

@Body
   <MudThemeProvider/> @*追加*@
   <MudDialogProvider/> @*追加*@
   <MudSnackbarProvider/> @*追加*@

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up