Blazor：如何为自定义组件启用style属性？

Blazor内置组件（如InputText）默认支持HTML属性（包括style），但自定义组件未定义对应参数时，直接添加style会抛出属性不存在的异常。以下两种方法可解决此问题：

方法一：显式定义Style参数 #

在自定义组件中添加Style参数，将外部传入的样式传递给组件内部元素：

修改后的MyComponent.razor代码：

<div style="@($"background-color:red; {Style}")">
    My component
</div>
<div style="background-color:yellow">
    Lorem ipsum something something
</div>

@code {
    [Parameter]
    public string Style { get; set; } = string.Empty;
}

外部使用方式不变，传入的style会与组件内部样式合并。若需避免多余分号，可添加简单判断处理空值。

方法二：捕获所有未匹配属性（更灵活） #

通过CaptureUnmatchedValues特性捕获组件上所有未定义的HTML属性（如style、class、id等），再应用到指定元素：

自动应用未匹配属性 #

修改后的MyComponent.razor代码：

<div style="background-color:red" @attributes="AdditionalAttributes">
    My component
</div>
<div style="background-color:yellow">
    Lorem ipsum something something
</div>

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object>? AdditionalAttributes { get; set; }
}

此方式下，外部传入的style会自动附加到div元素上。若内部style与外部传入的style存在同名规则，外部样式会覆盖内部对应规则。

合并内部与外部样式 #

若需确保内部样式与外部样式完全合并（而非覆盖），可手动处理：

@{
    var baseStyle = "background-color:red;";
    if (AdditionalAttributes?.TryGetValue("style", out var externalStyle) == true)
    {
        baseStyle += $" {externalStyle}";
    }
}

<div style="@baseStyle">
    My component
</div>
<div style="background-color:yellow">
    Lorem ipsum something something
</div>

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object>? AdditionalAttributes { get; set; }
}

两种方法对比：

• 显式定义参数：仅支持style属性，逻辑简单直观。
• 捕获未匹配属性：支持所有HTML属性，适合让自定义组件具备原生元素的属性兼容性。

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