Blazor是否具备类似WebForms Skins的组件皮肤配置机制？

Blazor没有提供和WebForms Skins完全一致的皮肤系统，但可以通过以下几种方式实现类似的“默认属性/皮肤”效果，避免重复设置相同属性：

1. 封装带默认属性的组件 #

这是最直接的方案：创建一个新组件，在内部封装目标组件并预设好默认属性，同时支持覆盖默认值。

示例代码：

<!-- StyledButton.razor -->
<button class="btn btn-primary" @attributes="@AdditionalAttributes">
    @ChildContent
</button>

@code {
    // 捕获未匹配的属性，允许覆盖默认值或添加新属性
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object>? AdditionalAttributes { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

使用时，直接调用<StyledButton>就会应用预设的class，需要修改时直接添加属性覆盖：

<!-- 默认样式 -->
<StyledButton>提交</StyledButton>

<!-- 覆盖默认class -->
<StyledButton class="btn btn-danger">删除</StyledButton>

2. 给组件参数设置默认值 #

如果是你自己开发的组件，可以直接在组件类中给参数指定默认值，这样未显式设置的参数会自动使用默认值。

示例代码：

// CustomInput.razor.cs
public class CustomInputBase : ComponentBase
{
    [Parameter]
    public string Placeholder { get; set; } = "请输入内容";

    [Parameter]
    public int MaxLength { get; set; } = 50;

    [Parameter]
    public string Value { get; set; } = string.Empty;
}

使用时，只需设置需要修改的参数：

<!-- 使用默认Placeholder和MaxLength -->
<CustomInput @bind-Value="inputValue" />

<!-- 覆盖Placeholder -->
<CustomInput @bind-Value="inputValue" Placeholder="请输入手机号" />

3. 结合CSS隔离与全局样式 #

如果是样式相关的“皮肤”需求，可以通过CSS类统一管理默认样式，组件默认应用该类，同时支持传入额外样式类。

示例代码：

<!-- CardComponent.razor -->
<div class="card-default @AdditionalClass">
    <div class="card-header">@Header</div>
    <div class="card-body">@ChildContent</div>
</div>

@code {
    [Parameter]
    public string Header { get; set; } = "默认标题";

    [Parameter]
    public string? AdditionalClass { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

在全局CSS或组件隔离CSS中定义.card-default的样式：

.card-default {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

4. 全局配置类+依赖注入 #

如果需要全局统一调整组件的默认属性，可以创建配置类并通过依赖注入传递给组件，实现“全局皮肤”的效果。

示例代码：

// 全局配置类
public class CardSettings
{
    public string DefaultHeader { get; set; } = "全局默认标题";
    public string DefaultCardClass { get; set; } = "card-default";
}

// 注册配置服务（Program.cs）
builder.Services.AddSingleton<CardSettings>(new CardSettings
{
    DefaultHeader = "系统统一标题",
    DefaultCardClass = "system-card-style"
});

// CardComponent.razor
@inject CardSettings Settings

<div class="@(CardClass ?? Settings.DefaultCardClass)">
    <div class="card-header">@(Header ?? Settings.DefaultHeader)</div>
    <div class="card-body">@ChildContent</div>
</div>

@code {
    [Parameter]
    public string? Header { get; set; }

    [Parameter]
    public string? CardClass { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

这种方式可以通过修改配置类的实例，一次性更新所有组件的默认属性，适合需要统一风格的场景。

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