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

Question

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

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

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

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

所以问题是

是否可以这样使用class属性？
如果是，我应该怎么做？

PS: 项目设置:

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

Answer 1

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

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>

Docs

Answer 2

您只需在组件中创建一个参数。例如，这很好用。在树组件中，TopDivClass 参数已添加并已使用。

在组件的标记中：

<div class="@TopDivClass">

在组件后面的代码中：

[Parameter]
public string TopDivClass { get; set; }

在使用组件的标记中：

<Components.Tree TopDivClass="TreeView" />

HTML中的结果是

<div class="TreeView" ...

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

Can't apply plain HTML class to a Blazor component

html

razor

blazor