如何通过自定义DialogPosition实现MudBlazor Dialog的定位？

当设置DialogPosition.Custom后，可通过以下两种方式实现自定义定位：

方法一：利用内置定位类直接设置样式 #

将Position设为DialogPosition.Custom时，对话框最外层容器会自动添加mud-dialog-position-custom类，直接针对该类编写CSS即可：

.mud-dialog-position-custom {
  position: absolute;
  top: 30px;
  left: 50px;
  /* 可按需添加right、bottom等定位属性 */
}

方法二：结合自定义类与深度选择器 #

如果需要为特定对话框单独设置样式，可通过DialogOptions.Class指定自定义类，再用CSS深度选择器穿透样式隔离：

1. 组件代码：

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

2. 对应CSS（组件内<style>标签中使用）：

::deep .my-custom-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

注意：如果在全局样式文件（如wwwroot/css/app.css）中编写样式，无需使用::deep，直接写类选择器即可。

内容的提问来源于stack exchange，提问作者Nando Lorris