无法将普通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'

问题是：

• 能否以这种方式使用class属性？
• 如果可以，我应该如何做到这一点？

附注：项目设置：

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

- Zhuravlev A.

Answer 1

你不能给组件应用一个类。你可以使用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>

文档

- Brian Parker

---

我本来想抱怨你也可以通过将它们作为变量传递来应用类--但这个答案太棒了！ - Bennyboy1973

@Bennyboy1973 从一开始就有了。很多人都忽略了它。它可以制作非常灵活的组件。 - Brian Parker

是的，我记得在Blazor University看到过这个，但当我第一次浏览整个网站时，我还不了解它的重要性。我会再次浏览所有内容，看看我错过了什么。 - Bennyboy1973

我建议你去阅读Blazor文档和Chris Sainty的博客。这就是我所做的。 - enet

Answer 2

您只需要在组件中创建一个参数。例如，这个例子能很好地工作。在树形组件中，TopDivClass参数已被添加并使用。

在组件的标记中：

<div class="@TopDivClass">

在组件的代码后台:

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

在使用组件时的标记语言：

<Components.Tree TopDivClass="TreeView" />

HTML 中的结果是：

<div class="TreeView" ...

- user3442435

Answer 3

我遇到了类似的问题，通过谷歌搜索后来到这里，所以我想分享一下，希望能帮到其他人。

我的项目设置是 .NET 7 和 Teams 应用程序项目模板（Blazor Server）。

问题与 OP 的类似 - 我想将 CSS 类应用于 Web 组件。在我的情况下，它是 FluentTextField，因此我无法修改其代码。

尽管如此：

<FluentTextField
    class="w-100"
    Placeholder="Provide the URL"
    Required="true"/>

没有产生任何错误，并且在浏览器的开发工具中，我可以看到类被添加到元素上，即<fluent-text-field class='w-100'>，但是父组件中定义的CSS并未应用。

事实证明，只需将“Blazor语法”更改为“JS语法”，一切都正常运行：

<fluent-text-field
    class="w-100"
    Placeholder="Provide the URL"
    Required="true"/>

- Voodu