Is there a way to add a class name to a blazor component without overriding the existing class name?

Question

Suppose I have a component, MyComponent, declared as follow:

<div class="container">
  "some nested content"
</div>

now I want to consume the component, and give it a class name:

<MyComponent class="new-class" />

If I do this, the "container" class name will be overridden by "new-class":

<div class="new-class">
  ....
<div>

Is there a way to keep both class names and have, at the end:

<div class="container new-class">
  ....
<div>

question from:https://stackoverflow.com/questions/65944445/is-there-a-way-to-add-a-class-name-to-a-blazor-component-without-overriding-the

Answer 1

You should to learn about "Component Parameters": [Parameter]. On your component, declare a parameter:

<div class="container @CssClass">
  "some nested content"
</div>

@code
{
   [Parameter] public string CssClass {get; set;} = "";
}

Now, when you use your component, if you want, you can set a value to the parameter:

<MyComponent CssClass="new-class" />

Quoting docs:

Components can have component parameters, which are defined using public simple or complex properties on the component class with the [Parameter] attribute. Use attributes to specify arguments for a component in markup.