ReactでLinkタグにstyled-componentでスタイルをあてたいとき

React開発でstyled-componentを使用してスタイリングしていた際に、react-routerのLinkを使った時にどのようにCSSをあてるのか少し詰まったので自分用で記事にしておきます。

styled-componentの書き方

基本の書き方

<ThreadTitle>スレッド一覧</ThreadTitle>

export const ThreadTitle =styled.h2`
font-weight:bold;
font-size:20px;
`

ThreadTitleという定数を定義して、ラップしてあげる。
今回でいうとThreadTitleでラップされたスレッド一覧がh2タグで囲まれたことになり、スタイルがあたります。

aタグでも同様のことができると考え、下記のように記述しましたが、うまくいかず、、

<ThreadLink>リンク先</ThreadLink>

export const ThreadLink = styled.a`
    text-decoration: none;
    color: blue;
    font-size: 20px;
    margin: 5px 0;
    &:hover {
        opacity: 0.7;
        color: red;
    }
`;

結論、下記のように書き換えることで正しくCSSをあてることができました。

<ThreadLink>リンク先</ThreadLink>

export const ThreadLink = styled(Link)`
    text-decoration: none;
    color: blue;
    font-size: 20px;
    margin: 5px 0;
    &:hover {
        opacity: 0.7;
        color: red;
    }
`;

■参考
https://styled-components.com/docs/basics#styling-any-component