MudBlazor component does not accept css styling

I'm new to MudBlazor and I have created a .NET 8 Blazor Web App.

I have a LoginLayout.razor and a LoginLayout.razor.css

Strangely the css styles are not applied on MudBlazor components

LoginLayout.razor

<EditForm Model="@loginModel" OnValidSubmit="OnValidSubmit"><DataAnnotationsValidator/><MudGrid Justify="Justify.Center"><MudItem xs="12" sm="7"><MudCard Elevation="6" Class="rounded-t-lg ma-4"><MudCardHeader Class="pa-2" Style="background-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text);"><CardHeaderContent><div Class="test">Login</div><MudText Class="test">Login</MudText></CardHeaderContent></MudCardHeader>

LoginLayout.razor.css

.test {    background-color: red;}

Result

I wonder why the css styling is not applied to the MudText although it has the class test when i take a look in the browsers object inspector

I already tried removing the style from the MudCardHeader because i thought it might overwrite the class styling but its the same result.