CODEWITHSUNDEEP
c#csscomponentsblazor
thalacker
thalacker

Reputation: 2827

How can I style Blazor Components differently

Say I have Component <MyText />. How can I style it differently based on different places it is implemented?

For instance, this is what I would want to do (using bootstrap classes for ease):

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" />

Which would output the following
enter image description here

Upvotes: 1

Views: 553

Answers (1)

Brian Parker
Brian Parker

Reputation: 14523

Take a look at 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" />

Upvotes: 2

Related Questions