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

【问题标题】：How can I style Blazor Components differently如何以不同方式设置 Blazor 组件的样式
【发布时间】：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" />

这将输出以下内容

【问题讨论】：

标签： c# css components blazor

【解决方案1】：

看看Attribute splatting and arbitrary parameters
MyText.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" />

【讨论】：