cssblazormudblazor

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

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

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.

Solution

  • You can't apply Blazor isolated CSS on MudBlazor/3rd Party components.

    Isolated CSS is scoped to the component it's created in.

    Your component LoginLayout.razor's isolated CSS LoginLayout.razor.css will not exist outside of it as MudBlazor components have their own scope. You can only apply the isolated CSS classes to HTML elements and built-in blazor components such as EditForm.

    You will have to create a global CSS file if you want to share classes between your custom component and MudBlazor components.