How to implement class mixes in styled-components?

Question

css

In a project I have the following structure (mix) which I use to indent certain blocks:

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

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

And as a result, in the code it looks something like this:

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

How to implement a similar principle in styled-components?
Those. I create stylized blocks NewsArticle, NewsArticle__Title, etc., I create blocks MixBlock__Title, MixBlockSubtitle somewhere separately in a more "global" area and write styles according to the following principle?

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

Answer 1

Those. I create stylized blocks NewsArticle, NewsArticle__Title, etc., I create blocks MixBlock__Title, MixBlockSubtitle somewhere separately in a more "global" area and write styles according to the following principle?

Depending on what you need to get. Thus, the html tag is immediately determined.
For example, in this example it is a div:

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

And accordingly, NewsArticle_Title will also be a div.
If you just need styles, then styled-components accepts styles as a string, respectively, you take it, create a string constant and write styles there. The only thing I don't know is how to make the css coloring plugin in styled-components recognize this string as a css string.

const MixStyles = `
  ...
`;

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