文章/答案/技术大牛

发布

社区首页 >问答首页 >无法将普通HTML类应用于Blazor组件

问无法将普通HTML类应用于Blazor组件
EN

Stack Overflow用户

提问于 2021-06-13 05:30:18

回答 3查看 935关注 0票数 2

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

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

其中SignedLabel -是Blazor组件和Price，Currency是组件的输入参数。我希望Blazor将class word作为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 >

razor

blazor

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-06-13 06:22:36

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

SomeComponent.razor

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

##Usage

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

将提供：

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

文档

票数 11

Stack Overflow用户

发布于 2021-06-13 07:13:25

您只需在组件中创建一个参数即可。例如，这很好。在Tree组件中，已添加了TopDivClass参数。

在组件的标记中：

<div class="@TopDivClass">

在组件背后的代码中：

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

在使用组件的标记中：

<Components.Tree TopDivClass="TreeView" />

HTML中的结果是

<div class="TreeView" ...

票数 2

Stack Overflow用户

发布于 2022-11-14 21:17:23

我遇到了一个类似的问题，谷歌把我带到了这里，所以我分享给任何人谁也可能这样做。

我的项目设置是.NET 7和(Blazor )。

问题与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"/>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67955176

复制

相似问题

问无法将普通HTML类应用于Blazor组件
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将普通HTML类应用于Blazor组件EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将普通HTML类应用于Blazor组件
EN