MudBlazor的MudAutoComplete：下拉样式无法应用到选中文本的问题求助

问题场景 #

使用MudBlazor的MudAutoComplete组件时，已为下拉列表项中括号内的文本设置了小字号样式，该样式在下拉列表中正常显示，但选中值后，输入框内的对应文本未应用该样式。当前通过ToStringFunc拼接ApplicationName和AppInfoId生成显示文本，无法为部分文本单独设置样式。

解决步骤 #

核心思路是通过自定义**输入框显示模板（InputTemplate）**替代ToStringFunc，让输入框内的选中值和下拉项使用相同的样式渲染逻辑：

1. 移除ToStringFunc配置 #

原代码中的ToStringFunc会生成纯文本，无法支持样式，因此需要删除该配置项。

2. 添加InputTemplate模板 #

新增InputTemplate属性，在模板内直接渲染选中对象的属性，并为括号内的文本设置样式，写法与下拉项的ItemTemplate保持一致：

修改后的完整代码 #

<MudAutocomplete T="ApplicationTable" Label="Enter Application ID or Name"
                 Style="margin-bottom:25px" Value="@values"
                 Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter" Margin="Margin.Dense"
                 SearchFunc="(string searchText) => SearchAutoComplete(searchText)"
                 AutoFocus="true" Clearable="true" ValueChanged="OnValueChanged"
                 Disabled="isDisableAutoComplete" ResetValueOnEmptyText="true" 
                 ItemSelectedTemplate="ItemSelectedTemplate"
                 ItemTemplate="ItemTemplate" 
                 InputTemplate="InputTemplate"
                 For="@(() => AppIdorName)" Required="true" RequiredError="App ID or Name is required!" />

<!-- 输入框选中值的显示模板 -->
<InputTemplate>
    @if (context != null)
    {
        <span>@context.ApplicationName <span style="font-size:0.8em;">(@context.AppInfoId)</span></span>
    }
</InputTemplate>

<!-- 下拉列表项模板（保留原有样式） -->
<ItemTemplate>
    <div>
        @context.ApplicationName <span style="font-size:0.8em;">(@context.AppInfoId)</span>
    </div>
</ItemTemplate>

<!-- 选中项的弹窗模板（可选，保持样式一致） -->
<ItemSelectedTemplate>
    <div>
        @context.ApplicationName <span style="font-size:0.8em;">(@context.AppInfoId)</span>
    </div>
</ItemSelectedTemplate>

效果说明 #

• 下拉列表中括号内的文本样式保持生效
• 选中值后，输入框内的括号内文本会自动应用相同的小字号样式，实现样式统一

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