如何用CSS定位MudExpansionPanel头部并动态设置不同背景色

要实现仅修改MudExpansionPanel的头部颜色，且支持动态设置不同面板的头部色值，核心思路是替换默认的Text属性，使用自定义HeaderContent来单独控制头部样式，具体步骤如下：

1. 放弃默认Text属性，改用自定义HeaderContent #

默认的Text属性会让样式作用于整个面板容器，改用HeaderContent插槽可以完全自定义头部的结构和样式，实现与内容区域的样式隔离。

2. 动态绑定头部颜色值 #

可以通过变量、数组或列表存储不同的颜色值，绑定到头部元素的style属性中，实现多面板的差异化颜色设置。

示例代码：多面板动态头部颜色 #

@code {
    // 定义多个面板的头部颜色列表
    private List<string> HeaderColorList = new List<string> { "pink", "royalblue", "lightgreen", "coral" };
}

@foreach (var color in HeaderColorList)
{
    <MudExpansionPanel Margin="Margin.Dense">
        <HeaderContent>
            <!-- 复用MudBlazor默认头部类，保证布局一致，叠加自定义背景色 -->
            <div class="mud-expand-panel-header" style="@($"background-color:{color}; color:black;")">
                面板头部 - 背景色：@color
            </div>
        </HeaderContent>
        <ChildContent>
            <MudCardContent>
                这是对应@color头部的内容区域，保持默认样式不受头部影响
            </MudCardContent>
        </ChildContent>
    </MudExpansionPanel>
}

示例代码：单个面板动态头部颜色 #

@code {
    // 单个面板的动态颜色变量，可根据业务逻辑修改
    private string CurrentHeaderColor = "purple";
}

<MudExpansionPanel>
    <HeaderContent>
        <MudTypography Class="mud-expand-panel-header" Style="@($"background-color:{CurrentHeaderColor}; color:white;")">
            动态头部（可随时修改颜色值）
        </MudTypography>
    </HeaderContent>
    <ChildContent>
        <MudCardContent>
            内容区域样式独立
        </MudCardContent>
    </ChildContent>
</MudExpansionPanel>

关键注意点 #

• 使用mud-expand-panel-header类可以继承MudBlazor默认头部的内边距、对齐方式等布局样式，避免自定义样式破坏原有UI一致性；
• 若需要更复杂的样式（比如hover效果），可以结合CSS隔离或全局样式，针对自定义头部元素添加额外样式规则。

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