MudBlazor中MudDrop ItemRenderer加Tooltip后宽度异常求助

我使用MudBlazor组件开发了如下MudDropContainer组件：

<MudDropContainer   T="TransactionViewModel" 
                    Items="transactions" 
                    ItemsSelector="@((item,dropzone) => Enum.GetName(typeof(TransactionCategoryEnum), item.Category) == dropzone)" 
                    ItemDropped="ItemUpdated" 
                    Class="d-flex flex-wrap flex-grow-1">
    <ChildContent>
        <MudDropZone T="TransactionViewModel" Identifier="Saves" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
            <MudText Typo="Typo.h6" Class="mb-4" Style="text-align:center;color:forestgreen">Saves</MudText>
         </MudDropZone>
        <MudDropZone T="TransactionViewModel" Identifier="Fees" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
            <MudText Typo="Typo.h6" Class="mb-4" Style="text-align:center;color:darkred">Fees</MudText>
        </MudDropZone>
        <MudDropZone T="TransactionViewModel" Identifier="Entertainment" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
            <MudText Typo="Typo.h6" Class="mb-4" Style="text-align:center;color:dodgerblue">Entertainment</MudText>
        </MudDropZone>
    </ChildContent>
    <ItemRenderer>
       @*  <MudTooltip Placement="Placement.Bottom" ShowOnHover="true" Delay="150" Class="ma-4 pa-4">
        <ChildContent>*@
                    <MudPaper Elevation="25" Class="pa-2 my-2">
                        <MudGrid>
                            <MudItem xs="8">
                                <MudText Typo="Typo.body1">@context.Name</MudText>
                            </MudItem>
                            <MudItem xs="4" Class="text-align-right">
                                <MudText Typo="Typo.body1">@context.Price</MudText>
                            </MudItem>
                        </MudGrid>
                    </MudPaper>
        @*  </ChildContent>
                <TooltipContent>
                    <MudText Typo="Typo.body2">@context.Date.Format()</MudText>
                    <MudText Typo="Typo.body2">@context.Description</MudText>
                </TooltipContent>
            </MudTooltip> *@
    </ItemRenderer>
</MudDropContainer>

问题现象 #

• 注释掉ItemRenderer中的MudTooltip代码时，内部的MudPaper能占满父容器MudDropZone的100%宽度；
• 启用Tooltip后，MudPaper仅占父容器50%宽度，尝试添加w-100类或width:100%样式均无效。

问题原因 #

MudTooltip默认是inline-block元素，这种元素的宽度由内部内容决定，不会自动撑满父容器。即使给MudPaper设置w-100，也会因为父容器Tooltip的宽度限制，无法占满整个MudDropZone。

解决方案 #

给MudTooltip添加d-block w-100类，将其改为块级元素并强制占满父容器宽度，同时给MudPaper也加上w-100类，确保宽度继承生效。可以移除Tooltip上多余的ma-4 pa-4类（如果不需要额外边距），避免影响布局。

修改后的ItemRenderer代码：

<ItemRenderer>
    <MudTooltip Placement="Placement.Bottom" ShowOnHover="true" Delay="150" Class="d-block w-100">
        <ChildContent>
            <MudPaper Elevation="25" Class="pa-2 my-2 w-100">
                <MudGrid>
                    <MudItem xs="8">
                        <MudText Typo="Typo.body1">@context.Name</MudText>
                    </MudItem>
                    <MudItem xs="4" Class="text-align-right">
                        <MudText Typo="Typo.body1">@context.Price</MudText>
                    </MudItem>
                </MudGrid>
            </MudPaper>
        </ChildContent>
        <TooltipContent>
            <MudText Typo="Typo.body2">@context.Date.Format()</MudText>
            <MudText Typo="Typo.body2">@context.Description</MudText>
        </TooltipContent>
    </MudTooltip>
</ItemRenderer>

效果对比 #

• 正确样式（无Tooltip）：
• 异常样式（启用Tooltip未修复）：

内容的提问来源于stack exchange，提问作者Jakub Łuka