Justify Content for DialogActions in MudBlazor

Question

In MudDialog, I want to set the MudButton in DialogActions to the center with Justify Content.

It works when I use developer tools in chorme, but how can I set this style in my code.

I want the MudButton to be positioned in the middle.

Answer 1

All the CSS classes that you want to apply to <DialogActions> container should be placed in the ClassActions attribute of MudDialog.

Here in this example, I add the justify-center CSS utility class to the ClassActions attribute which centres the button in DialogActions

<MudDialog @bind-IsVisible="visible" Options="dialogOptions" ClassActions="justify-center">
    <TitleContent>
        <MudText Typo="Typo.h6">
            <MudIcon Icon="@Icons.Material.Filled.Edit" Class="mr-3" /> Edit rating
        </MudText>
    </TitleContent>
    <DialogContent>
        <p>How awesome are inline dialogs?</p>
        <MudRating @bind-SelectedValue="rating" Class="mt-3" />
    </DialogContent>
    <DialogActions>
        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="Submit" Class="px-10">Close</MudButton>
    </DialogActions>
</MudDialog>

MudBlazor Snippet