如何在MudBlazor自定义标签面板中选中图标时将背景从透明改灰色

要实现选中图标后背景固定为灰色的效果，核心是利用MudBlazor自带的状态类，通过自定义CSS覆盖选中状态下的图标样式。

步骤1：编写自定义CSS #

在项目全局样式文件（如wwwroot/css/app.css）或组件的<style scoped>块中添加以下样式：

/* 选中状态下的图标背景 */
.custom-tab-panel .mud-tab-active .mud-tab-icon {
  background-color: #e0e0e0; /* 浅灰色，可按需调整灰度值 */
  border-radius: 4px; /* 可选，给背景添加圆角优化视觉 */
}

/* 阻止选中态的hover效果改变背景色 */
.custom-tab-panel .mud-tab-active:hover .mud-tab-icon {
  background-color: #e0e0e0;
}

步骤2：确保TabPanel结构正确 #

你的MudTabPanel需要包裹在MudTabs组件中，完整示例代码如下：

<MudTabs Class="custom-tab-panel">
    <MudTabPanel Icon="@Icons.Material.Filled.Menu" Size="Size.Small" ToolTip="Menu">
        <!-- 第一个面板的内容 -->
    </MudTabPanel>
    <MudTabPanel Icon="@Icons.Material.Filled.Search" Size="Size.Small" ToolTip="Search">
        <!-- 第二个面板的内容 -->
    </MudTabPanel>
    <MudTabPanel Icon="@Icons.Material.Filled.Settings" Size="Size.Small" ToolTip="Settings">
        <!-- 第三个面板的内容 -->
    </MudTabPanel>
</MudTabs>

额外优化（可选） #

如果需要调整未选中状态的hover背景，可添加以下样式：

.custom-tab-panel .mud-tab:not(.mud-tab-active):hover .mud-tab-icon {
  background-color: #f5f5f5; /* 比选中态更浅的灰色，保持视觉层次 */
}

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