How to setup MatBlazor so that controls are styled?

Question

Trying to setup and use MatBlazor components in new .net 5 blazor webassembly. But, controls are not styled.

I followed the instructions at https://www.matblazor.com/. Installed MatBlazor

dotnet add package MatBlazor

Added using to _imports

@using MatBlazor

added lines to index.html

<script src="_content/MatBlazor/dist/matBlazor.js"></script>
<link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />

registered service in program.cs

services.AddMatBlazor();

added MatPortalHost to app.razor

<MatPortalHost></MatPortalHost>

Added simple button

<MatButton> mat button </MatButton>

But my button has no styling. I tried a MatTextField too; no styling.

Did I miss a step? Are the setup instructions correct?

Answer 1

Add a reference to MatBlazor in your <application>.Client.csproj

    <PackageReference Include="MatBlazor" Version="2.8.0" />

Note

Please pay attention that only preview version 2.9.0 has .net 5 official support:

so is better to add the following reference:

    <PackageReference Include="MatBlazor" Version="2.9.0-develop-042" />

but it's in preview !