How to organize component customization?

Question

css

There is, for example, the Parent.vue component, which renders other components in itself:

<div class="parent">
  <Child1 class="child1">
    <Child2 class="child2">
    </Child2>
  </Child1>
</div>

I need that in some situation the text in the Child2 component becomes red. I see the following solutions:

- hang the class modifier "parent_child2_red" and specify in this class:

.child2 {
    color: red;
  }

- add an option like color" to Parent.vue and then Parent will look like this:

<div class="parent">
  <Child1 class="child1">
    <Child2 :class="{child2: true, child2_color_red: childRedColor}">
    </Child2>
  </Child1>
</div>

props: {childRedColor: Boolean}

//

<Parent :childRedColor="true" />

- or add a prop to pass classes that will be applied to Child2?

<div class="parent">
  <Child1 class="child1">
    <Child2 :class="'child2' + child2Classes.join(' ')">
    </Child2>
  </Child1>
</div>

props: {child2Classes: Array}

// 

<Parent :child2Classes="['child2_color_red']" />

I understand that all these options solve the "problem", but perhaps one of them is considered more correct?

Answer 1

And who chooses the color? parent component? Or someone above?
If the second case, then, I suppose, props in any form, or inject.
Otherwise, the question is: The text can only be red? Or is there a possibility that a different color will be needed? If the second option, then I think a custom property would be appropriate:

<template>
<div class="parent">
  <Child1 class="child1">
    <Child2 class="child2" :style="'--text-color: ' + textColor">
    </Child2>
  </Child1>
</div>
</template>

Otherwise, just add the class as you feel comfortable on a case-by-case basis.
PS I have not worked with BEM, so the recommendations may not correspond to this methodology.