如何为MudButtonGroup中选中状态的MudButton设置样式？

方案1：通过绑定值手动添加样式类 #

给每个按钮绑定条件类，根据选中状态切换样式：

<MudButtonGroup @bind-SelectedValue="selectedOption">
    <MudButton Value="opt1" Class="@(selectedOption == "opt1" ? "selected-btn" : "")">选项1</MudButton>
    <MudButton Value="opt2" Class="@(selectedOption == "opt2" ? "selected-btn" : "")">选项2</MudButton>
</MudButtonGroup>

<style>
.selected-btn {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
}
</style>

@code {
    private string selectedOption = "opt1";
}

方案2：利用MudBlazor内置的激活类 #

MudButtonGroup选中按钮时会自动添加mud-button-active类，直接用这个类写CSS即可：

.mud-button-group .mud-button.mud-button-active {
    background-color: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

如果是特定变体（比如Outlined），可以更精准定位：

.mud-button-group .mud-button-outlined.mud-button-active {
    background-color: rgba(37, 99, 235, 0.1);
    border-color: #2563eb;
    color: #2563eb;
}

方案3：通过MudBlazor主题全局配置 #

在项目的主题设置中统一修改按钮激活状态样式：

var mudTheme = new MudTheme
{
    Components = new Dictionary<string, ComponentStyle>()
    {
        {
            nameof(MudButton), new ComponentStyle()
            {
                Styles = new Dictionary<string, string>()
                {
                    { "Active", "background-color: #2563eb; color: white;" }
                }
            }
        }
    }
};

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