Elements mixes. How to?

[awinogradov]

Imagine we have a component Suggest

const cnSuggest = cn('Suggest');

export cont Suggest = props => 
  <div className={cnSuggest(null, [props.className])}>
     <div className={cnSuggest('Logo')} />
  </div>

In project we want to customize Suggest.

<Suggest className="MyMixedSelector" />

But, if you want to cutomize some elements...

.MyMixedSelector .Suggest-Logo {}

How to avoid this?

[belozer]

I had a similar thing... But on bemxjst.

const cnSuggest = cn('Suggest');

export cont Suggest = props => 
  <div className={cnSuggest(null, [props.className])}>
     <div className={cnSuggest('Logo', null, [props.mixes.Logo])} />
  </div>

const SuggestMixes = { Logo: 'CustomMixForElem' }
<Suggest className="MyMixedSelector" mixes={SuggestMixes} />

or

<Suggest className="MyMixedSelector" LogoMix="CustomMixForElem" />

.CustomMixForElem {}

Thus, we make an additional api for the block. IMHO, external block should not know about the elements of the child block. The API allows you to make some elements public.

[yarastqt]

Закрываю этот ишьюс, т.к. данная проблема нужна была в первую очередь для использования css-modules, решение этой проблемы давайте дальше обсуждать тут — #545.