无法将纯 HTML 类应用于 Blazor 组件

Question

我尝试在 .NET 5 Blazor 项目的 .razor 文件中使用此代码：

<SignedLabel class="some-css-class" Price=123 Currency=Currency.Usd />

其中SignedLabel- 是 Blazor 组件Price， ,Currency是组件的输入参数。我希望 Blazor 将该class单词视为 html 属性，并将纯 HTML 类应用于此组件，以便我稍后可以设置此组件的样式。但 Blazor 实际上将其视为组件的另一个输入参数，并导致整个应用程序渲染崩溃并出现错误：

Object of type 'SignedLabel' does not have a property matching the name 'class'

所以问题是

• 是否可以以这种方式使用类属性？
• 如果是，我该怎么做？

PS：项目设置：

<Project Sdk="Microsoft.NET.Sdk.Web">
    <PropertyGroup>
        <TargetFramework>net5.0</TargetFramework>
        <Nullable>enable</Nullable>
        <LangVersion>9</LangVersion>
    </PropertyGroup>
    ...
</Project >

Answer 1

您不能将类应用于组件。您可以使用展开来捕获放置在组件上的属性，以将其作为参数传递给组件元素之一。

SomeComponent.razor

<div @attributes="@CapturedAttributes">
    Hello
</div>
@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string,object> CapturedAttributes { get; set; }
}

用法

<SomeComponent id="fred" class="some-css-class" style="width:100vh" />

将渲染：

<div id="fred" class="some-css-class" style="width:100vh" >
    Hello
</div>

文档