Blazor项目：如何用MudBlazor实现带图标的圆角输入框按钮组合

方案一：利用MudBlazor原生组件类快速实现 #

直接通过MudBlazor内置布局类和样式类，无需额外自定义CSS就能实现无缝组合效果：

<MudPaper Class="d-flex rounded-4 overflow-hidden" Elevation="0">
    <MudTextField 
        @bind-Value="searchText" 
        Variant="Variant.Outlined" 
        Class="flex-grow-1 border-end-0" 
        EndIcon="@Icons.Material.Filled.Search"
        IconSize="Size.Medium"
        Placeholder="输入搜索内容" />
    <MudButton 
        Variant="Variant.Outlined" 
        Color="Color.Primary" 
        Class="rounded-l-0"
        OnClick="HandleSearch">
        搜索
    </MudButton>
</MudPaper>

@code {
    private string searchText = string.Empty;

    private void HandleSearch()
    {
        // 这里写你的业务逻辑
    }
}

关键细节说明：

• MudPaper作为容器，rounded-4设置整体圆角（数值越大圆角越明显，可选rounded-2/rounded-3/rounded-circle），overflow-hidden防止内部组件边框溢出容器
• MudTextField的border-end-0移除右侧边框，flex-grow-1让输入框自动占满容器剩余空间
• MudButton的rounded-l-0移除左侧圆角，和输入框右侧边缘无缝衔接，形成完整的圆角整体
• 输入框的EndIcon可替换为任意MudBlazor内置图标，也可用StartIcon把图标放在左侧

方案二：自定义CSS实现更灵活的样式 #

如果需要完全自定义边框、间距或匹配特定设计风格，可使用下面的CSS方案：

<div class="input-btn-group">
    <MudTextField 
        @bind-Value="searchText" 
        Variant="Variant.Outlined" 
        Class="custom-input" 
        EndIcon="@Icons.Material.Filled.Search"
        Placeholder="输入搜索内容" />
    <MudButton 
        Variant="Variant.Outlined" 
        Color="Color.Primary" 
        Class="custom-btn"
        OnClick="HandleSearch">
        搜索
    </MudButton>
</div>

<style>
.input-btn-group {
    display: flex;
    border-radius: 16px; /* 自定义圆角大小 */
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.23); /* 匹配MudBlazor Outlined默认边框色 */
}

.custom-input {
    flex-grow: 1;
    border: none !important;
    box-shadow: none !important;
}

/* 隐藏输入框原生的Outlined边框 */
.custom-input .mud-input-outlined-border {
    display: none;
}

.custom-btn {
    border-left: none !important;
    border-radius: 0 16px 16px 0 !important;
    /* 可选：调整按钮内边距，和输入框对齐 */
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
</style>

@code {
    private string searchText = string.Empty;

    private void HandleSearch()
    {
        // 这里写你的业务逻辑
    }
}

适配不同Variant的调整：

• 如果用Variant.Filled，只需把容器的border换成背景色，同时调整输入框和按钮的背景色保持一致即可
• 图标可替换为自定义SVG，只需把EndIcon换成自定义SVG组件

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