Blazor中如何扩展InputRadio组件添加默认CSS类

实现思路 #

要创建自带foo CSS类的FooRadio组件，同时保留原生InputRadio的所有功能（包括与InputRadioGroup联动、表单验证等），可以通过继承InputRadio<TValue>并自定义渲染逻辑来实现，核心是合并默认类、用户传入类和表单验证类。

完整组件代码 #

创建FooRadio.razor文件，内容如下：

@typeparam TValue
@inherits InputRadio<TValue>

<input type="radio" 
       class="@GetCombinedCssClasses()"
       value="@Value"
       checked="@IsChecked"
       @onchange="HandleValueChange" />
@ChildContent

@code {
    private bool IsChecked => CurrentValue.Equals(Value);

    private string GetCombinedCssClasses()
    {
        // 收集所有需要合并的CSS类
        var cssClasses = new List<string>
        {
            // Blazor表单验证自动生成的类（如valid/invalid）
            FieldCssClass,
            // 默认添加的foo类
            "foo"
        };

        // 如果用户传入了class属性，也加入列表
        if (AdditionalAttributes?.TryGetValue("class", out var userClass) == true && !string.IsNullOrWhiteSpace(userClass.ToString()))
        {
            cssClasses.Add(userClass.ToString());
        }

        // 去重并拼接成字符串
        return string.Join(" ", cssClasses.Distinct().Where(c => !string.IsNullOrWhiteSpace(c)));
    }

    private void HandleValueChange(ChangeEventArgs e)
    {
        // 复用InputRadio的逻辑更新值
        CurrentValueAsString = e.Value.ToString();
    }
}

使用示例 #

在页面或父组件中直接使用FooRadio，用法和原生InputRadio完全一致，无需手动添加foo类：

<InputRadioGroup @bind-Value="SelectedCategory">
    <FooRadio Value="Electronics">电子产品</FooRadio>
    <FooRadio Value="Clothing" class="custom-class">服饰（额外添加自定义类）</FooRadio>
    <InputRadio Value="Books">书籍（原生组件）</InputRadio>
</InputRadioGroup>

@code {
    private string SelectedCategory { get; set; }
}

代码说明 #

• 泛型支持：通过@typeparam TValue声明泛型参数，与原生InputRadio保持一致，支持任意类型的单选值（如字符串、枚举等）。
• CSS类合并：GetCombinedCssClasses方法合并了三类CSS：
  1. FieldCssClass：Blazor表单验证自动生成的状态类（如valid/invalid）。
  2. 默认的foo类：组件自带的样式类。
  3. 用户传入的class：如果手动添加了额外类，会和默认类合并。
• 功能复用：通过CurrentValue、Value等继承自InputRadio的属性，以及HandleValueChange方法复用原生组件的状态更新逻辑，确保和InputRadioGroup的联动完全正常。

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