MudSelect弹出层位置异常：AnchorOrigin属性无法调整位置求助

问题现象 #

MudSelect的弹出层未显示在控件正下方，而是偏移到页面按钮下方过远的位置，且通过AnchorOrigin属性无法调整其位置。

相关代码 #

<MudPaper Class="p-2">
  <MudStack>
    <MudTextField ... />
    <MudSelect T="string" @bind-Value="@Customer.Nationality" Label="Nationality"
       AnchorOrigin="Origin.BottomCenter" ReadOnly="@(!_editCustomerInProgress || Customer.Id == 0)"
       Required="true" RequiredError="Required.">
       @foreach (var country in Countries)
       {
        <MudSelectItem Value="@country" />
       }
     </MudSelect>
     <MudTextField ... />
     <MudTextField ... />
     <MudSelect T="string" @bind-Value="@another_select" ... />
       <MudSelectItem Value=1>xxx</MudSelectItem>
       <MudSelectItem Value=2>yy</MudSelectItem>
       ...
     </MudSelect>
     <MudTextField ... />
     @if (_editCustomerInProgress)
     {
       <div class="d-flex align-center justify-space-between">
         <MudButton Variant="Variant.Filled" Color="Color.Error" Disabled="false" Class="mt-5" OnClick="@(() => OnCancel())">Cancel</MudButton>
         <MudButton OnClick="@(async () => await Submit())" Variant="Variant.Filled" Color="Color.Success" Disabled="false" Class="mt-5 ml-auto">Submit</MudButton>
       </div>
     }
     else
     {
       if (Customer.Id != 0)
       {
         <div>
           <MudButton Variant="Variant.Filled" Color="Color.Info" Disabled="false" Class="mt-5 ml-auto" OnClick="@OnEdit">Edit</MudButton>
         </div>
       }
     }   
</MudStack>

解决方法 #

问题根源是误将MudThemeProvider放置在MudAppBar组件内部。将MudThemeProvider移动到页面根容器或应用根组件（如MainLayout.razor的合适位置），确保它能正确为所有子组件提供主题定位上下文，即可修复弹出层位置偏移的问题。

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