[SOLVED] Calendar in FluentUI.Blazor is not showing datapicker correct

Calendar in FluentUI.Blazor is not showing datapicker correct

I am building a Blazor server app in .Net 7 (cannot choose .Net 8, as it is company standard). I have installed the NuGet-package Microsoft.Fast.Components.FluentUI and made the setup in my project as stated in https://calm-sea-053fa6a03-archivesv3.westeurope.3.azurestaticapps.net/CodeSetup

I can add the different components to my page, and they seem to work fine, except the calendar component. When i click on the calendar icon to show the datapicker, it only shows a list of numbers. Below is the code sample and a screendump.

Anyone else who has experienced this? And know how to solve it?

Thanks in advance

/Mads

<FluentDatePicker AriaLabel="To" @bind-Value="@SelectedValue" />
<p>Selected Date: @(SelectedValue?.ToString("yyyy-MM-dd"))</p>

@code
{
    private DateTime? SelectedValue = DateTime.Today.AddDays(-2);
}

Solution

I found out. I needed to add the following to the head-tag of _Host.cshtm file:

<link href="{PROJECT_NAME}.styles.css" rel="stylesheet" />