ReactのLinkコンポーネントにstyled-componentsでCSSをあてる

わかれば簡単ですが検索で難儀したのでメモとして。

実現したいこと

• ReactのLinkコンポーネントにstyled-componentsでCSSをあてる
• style属性にはしたくない
• Linkコンポーネントにclassやidをつけた上でcreateGlobalStyleを使うような形にしたくない

HTMLタグとは違う名称で用意されたコンポーネントに対してはstyled.aのようにstyled-componentsを用いることができませんが、これをなんとかしたいというのが目的です。

コード

const StyledA = styled.a`
display: block;
`
const StyledLink = StyledA.withComponent(Link);

const GlobalNav = () => (
  <StyledLink to="/">Home</StyledLink>
)

1. danwebb.co/src/components/elements/a.js
2. styled-components

上記1つ目でStyledA.withComponent(Link)という書き方を知り、withComponentで2つ目のページなどを見て確認という感じです。

結び

拡張で対応する形ですが、CSSの具体的な装飾指示を定義してから拡張するという2段階が必要なため少々面倒な印象はあります。
この2段階はなんとなく繋げられそうな気はしますがそういう書き方はなさそうなので、目的達成のためにはこの形がよいようです。