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.