如何以不同方式设置 Blazor 组件的样式

Posted 2023-02-23

【中文标题】如何以不同方式设置 Blazor 组件的样式

【英文标题】：How can I style Blazor Components differently

【发布时间】：2021-03-07 23:26:44

【问题描述】：

假设我有组件<MyText />。如何根据实现的不同位置设置不同的样式？

例如，这就是我想要做的（使用引导类方便）：

MyDocument.razor

<div> This text below will be red.</div>
<MyText class="text-danger" /> 

<div> This text below will be blue.</div>
<MyText class="text-info" />

这将输出以下内容

【参考方案1】：

看看Attribute splatting and arbitrary parametersMyText.razor

<div @attributes="AdditionalAttributes">Some Cool Text</div>

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

MyDocument.razor

<div> This text below will be red.</div>
<MyText class="text-danger" /> 

<div> This text below will be blue.</div>
<MyText class="text-info" />