MudBlazor Select组件选中选项后收缩问题求助

问题原因 #

你遇到的MudSelect选中后收缩的问题，根源在于给组件添加了冲突的自定义flex布局类：

• 你给MudSelect设置了d-flex align-center justify-center，这会覆盖组件内部的默认布局逻辑。
• 当选中选项时，Filled变体的标签会上移，此时自定义的flex布局会重新计算内容的空间分配，导致组件宽度不受控地收缩。
• 虽然你设置了min-width:200px和FullWidth="true"，但flex布局的优先级会干扰这些属性的正常生效。

解决方法 #

移除MudSelect上的d-flex align-center justify-center类，保留必要的自定义样式即可。如果需要让选中的文本居中，可以通过组件的内置参数或自定义CSS调整内部元素样式，而非直接给组件加flex类。

修正后的代码示例：

<div class="d-flex justify-space-between mx-2">
    <MudGrid>
        <MudItem xs="12" md="4" sm="4">
            <MudSelect T="string" Label="From Language" @bind-Value="@fromLanguage" 
                       Variant="Variant.Filled" Style="min-width: 200px;" 
                       FullWidth="true" Dense="true" DisableUnderLine="true" 
                       Class="et-select-input mud-width-full py-8">
                @foreach (var language in languages)
                {
                    <MudSelectItem Value="@language">@language</MudSelectItem>
                }
            </MudSelect>
        </MudItem>
        <MudItem xs="12" md="4" sm="4">
            <MudSelect T="string" Label="To Language" @bind-Value="@toLanguage" 
                       Variant="Variant.Filled" Dense="true" Style="min-width: 200px;" 
                       FullWidth="true" DisableUnderLine="true" 
                       Class="et-select-input mud-width-full py-8">
                @foreach (var language in languages)
                {
                    <MudSelectItem Value="@language">@language</MudSelectItem>
                }
            </MudSelect>
        </MudItem>
        <MudItem>
            <MudButton Color="MudBlazor.Color.Primary" Class="py-14 d-flex flex-1">Do something</MudButton>
        </MudItem>
    </MudGrid>
</div>
@code {
    private List<string> languages = new List<string> { "English", "Spanish", "French", "German", "Dutch" };
    private string fromLanguage = "";
    private string toLanguage = "";
}

补充说明 #

你提到官方页面也有类似行为，这通常是因为某些演示场景没有设置明确的宽度约束，或者是特定布局下的边缘情况，但你的问题完全是由自定义flex类与组件内部布局冲突导致的，移除冲突类即可解决。

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