chot Inc.

chot Inc.

What is Jamstack?

styled-componentsスタイルドコンポーネント

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;
  `}
`
back to Top