Как реализовать миксы классов в styled-components?

Question

[eugenedrvnk]

В проекте у меня есть следующая структура (микс), которую я использую для добавления отступов определённым блокам :

.mix-block {
  &__title {
    margin-bottom: 10px;
  }

  &__subtitle {
    margin-bottom: 5px;
  }
}

И по итогу, в коде это выглядит как-то так :

<div class="news-article mix-block">
    <div class="news-article__title mix-block__title">some title</div>
    <div class="news-article__subtitle mix-block__subtitle">some subtitle</div>
    <div class="news-article__desc">some desc</div>
  </div>

Как реализовать подобный принцип в styled-components?
Т.е. я создаю стилизованные блоки NewsArticle, NewsArticle__Title и т.д, создаю где-то отдельно в более "глобальной" области блоки MixBlock__Title, MixBlockSubtitle и пишу стили по следующему принципу?

const NewsArticle__Title = styled(MixBlock)`
  /* some custom styles */
`

Answer 1

[WbICHA]

Т.е. я создаю стилизованные блоки NewsArticle, NewsArticle__Title и т.д, создаю где-то отдельно в более "глобальной" области блоки MixBlock__Title, MixBlockSubtitle и пишу стили по следующему принципу?

В зависимости от того, что надо получить. Таким образом сразу определяется и хтмл тег.
К примеру, в данном примеру это див:

const MixBlock = styled.div`
  /* some custom styles */
`;
const NewsArticle__Title = styled(MixBlock)`
  /* some custom styles */
`;

И соответственно NewsArticle__Title тоже будет див.

Если же нужны просто стили, то styled-components принимает стили в виде строки, соответственно берёшь, создаёшь строковую константу и прописываешь там стили. Единственное я хз как сделать так, чтобы плагин для раскраски цсса в styled-components распознавал эту строку как цсс строку.

const MixStyles = `
  ...
`;

const NewsArticle__Title = styled.div`
  ${MixStyles}
`