styled componentsでただのマークアップするときに悩む

概要

styled componentsで再利用しないCSSをただマークアップするとき、全部 const Hoge=styled.~って書くとめっちゃ変数増えません？

その時どう書くべきかなあと、悩むだけで結論のない記事です。

悩み

例えばこんなデザインがLPの中段あたりに出てきたりしたとします。
僕はずっとこんな感じで書いてました。

MessageSection.js

// 省略
import Message from './Message';

const Wrapper = styled.div`
  width: 100%;
  padding: 40px 16px;
`;

const Heading = styled.div`
  font-size: 28px;
  color: black;
  :after {
    content: '';
    // 省略
  }
`;

const messages = [
  // 省略
];

export default props => (
  <Wrapper>
    <Heading>Message</Heading>

    [messages.map((v,i)=>(<Message {...v}>)]
  </Wrapper>
)

Message.js

// 省略

const Wrapper = styled.div`
  max-width: 256px;
  margin: auto;
`;

const Thumbnail = styled.img`
  // 省略
`;

const Heading = styled.div`
  // 省略
`;

export default props => (
  <Wrapper>
    <Thumbnail />
    <Heading />
  </Wrapper>
)

でもなんか、これだけのためにどんだけ変数作るんだよと思ってしまい、こんな書き方試してました。
上記の雑な例程度ならまだしも、LPとかみたいな再利用性はないがマークアップ量ハンパないの書く時とか全部変数宣言するのツライんですよね。

なのでこうやって書いてみました。

MessageSection.js

// 省略
import Message from './Message';

const Wrapper = styled.div`
  width: 100%;
  padding: 40px 16px;
  .heading {
    // 省略
  }
`;

export default props => (
  <Wrapper>
    <div className="heading">Message</div>

    [messages.map((v,i)=>(<Message {...v}>)]
  </Wrapper>
)

Message.js

// 省略

const Wrapper = styled.div`
  max-width: 256px;
  margin: auto;
  .thumbnail {
    // 省略
  }
  .heading {
    // 省略
  }
`;

export default props => (
  <Wrapper>
    <div className="thumbnail">{props.thumbnail}</div>
    <div className="heading">{props.heading}</div>
  </Wrapper>
)

雑な書き方は色々許してください
わあ、書きやすくなった〜って気がして嬉しがってたら気づいちゃったんすよね。

Message.jsの.heading、MessageSection.jsの.headingのCSSがあたってまうやん、、、

styled componentsの、名前空間の衝突を避ける旨みをフル無視してたみたいですね、、、。
むう。でも変数乱立するの嫌やなあ。

どうしよ、、