How do you position a MudBlazor Dialog using a custom DialogPosition?

Given a MudBlazor MudDialog component with a Position set to DialogPosition.Custom, the dialog will appear absolutely positioned to the top left hand corner of the viewport.

@{
   var dialogOptions = new DialogOptions
   {
     Position = DialogPosition.Custom,
   };
}
<MudDialog Options="@dialogOptions" Class="custom-dialog">
  <DialogContent>
    Hello World.
  </DialogContent>
</MudDialog>

There isn't a position property in the options. The documentation doesn't reference custom positioning at all.

Once the component has rendered, the CSS class .custom-dialog isn't applied to the dialog parent, but a static div a few levels down the tree, so positional styles cannot be applied to it.

Is there a way to set the custom position?

When you set it as DialogPostion.Custom it applies the .mud-dialog-custom class to the dialog parent.

It's an undefined class so I believe it was designed to be overridden. So you simply use that class to apply your custom position.

e.g.

Parent.razor

@inject IDialogService DialogService

<MudButton @onclick="OpenDialogCustom" Variant="Variant.Filled" Color="Color.Primary">
    Open Custom Dialog with positioning
</MudButton>
@code {
    private void OpenDialogCustom()
    {
        var options = new DialogOptions { Position=DialogPosition.Custom};
        DialogService.Show<MyCustomDialog>("CustomPosition dialog", options);
    }
}

MyCustomDialog.razor

<style>
    .mud-dialog-custom{
        display: grid;
        align-content: center;
        justify-content: space-between;
        justify-items: end;
    }
</style>

<MudDialog>
  <DialogContent>
    Hello World.
  </DialogContent>
</MudDialog>

TryMudBlazor Snippet