What does the Class Tag mean on MudBlazor Components?

Question

I created a new MudBlazor project using the dotnet template they describe here. I opened up the project and noticed the class tag on the MudContainer property <MudContainer MaxWidth="MaxWidth.Large" Class="my-16 pt-16"> I was confused on what this was, and I couldn't find anything in my solution with the name "my-16" or "pt-16".

Here's a more extended code:

MainLayout.Razor

@inherits LayoutComponentBase

<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
   ... (Extra code taken out)

    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.Large" Class="my-16 pt-16">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>

When I searched the API documentation here, and any other component that has this tag, all I found was this description: "User class names, separated by space." which I got no help from. I then added in a file called MainLayout.razor.css with this test class:

.test {
    background-color: red !important;
}

and tried to put test into the class tag, but it had no effect. Overall I'm at a totall loss on two things:

1. What does the class tag mean?
2. Where can I find the my-16 and pt-16 classes provided?

Answer 1

What does the class tag mean?

There is class (lowercase), which is an HTML class attribute and there is Class (capital C), which is a MudBlazor property.

MudBlazor components expose the Class property which get added on top of the components underlying HTML elements class attribute.

The code below is a snippet of MudContainer component.

<div @attributes="UserAttributes" class="@Classname" style="@Style">
    @ChildContent
</div>

@code {
    string Classname =>
        new CssBuilder("mud-container")
            .AddClass($"mud-container-fixed", Fixed)
            .AddClass($"mud-container-maxwidth-{MaxWidth.ToDescriptionString()}", !Fixed)
            .AddClass(Class) 
            .Build();
}

.AddClass(Class) <- this is where the classes you define in the Class property get added.

So similar to how you add classes to an HTML element, you use MudBlazor components Class property to add your classes. i.e. by seperating them with spaces.

<div class="bio-text bio-heading">My Bio</div>

<MudText Class="bio-text bio-heading">My Bio</MudText>

Where can I find the my-16 and pt-16 classes provided?

my-16 and pt-16 are CSS utility classes, these two are specifically used for spacing.

You should have a read through what are CSS utility classes. In a few words, they're also classes that you can use.