chot Inc.

chot Inc.

What is Jamstack?

Emotionエモーション

Emotionは、CSS in JSのライブラリの一種です。Reactのスタイリングとしても使われます。

メリットとして、同じコンポーネント内にCSSを書けることによって、ファイル管理がしやすいという点もあります。

styled-componentsと似たような書き方をすることも可能です。


いくつか書き方がありますが一般的に以下のような書き方になります。

例:

  <a css={buttonStyle} href={}>ボタン</a>

  const buttonStyle = css`
  display: inline-block;
  padding: 10px 20px;
  background: black;
  color: white;
`
back to Top