styled-componentsは、CSS in JSのライブラリの一種です。Reactのスタイリングとしても使うことが可能です。
メリットとして、同じコンポーネント内にCSSを書けることによって、ファイル管理がしやすいという点があります。
クラス名の重複が発生しないこともメリットといえます。
以下のように1つのタグに命名が必要で、また条件分岐も可能です。
例:
<Button href="#">ボタン</Button>
const Button = styled.a`
display: inline-block;
padding: 10px 20px;
background: black;
color: white;
${props => props.primary && css`
background: white;
color: black;
`}
`