emotionを使ってみた

CSS in JSのライブラリでstyled-componentsをずっと使ってましたが、emotionの方が軽いというのを聞き使ってみました。

emotion.sh

具体的に何がどういいのかはまだ体感してないですが、ざっと調べたところstyled-componentsに比べるとレンダリングが速かったり、ファイルサイズも小さくなるようです。

基本的な導入をやってみたところ、styled-componentsを使っていた時と大きく変わるところもなく使えますし、これからはemotion使ってみようかなとなりました。

導入

yarn add @emotion/core @emotion/styled

Buttonコンポーネント作ってみる

オブジェクト形式でも書けますが、テンプレートリテラルを使った書き方に慣れてるので、そちらでやってみます。

/** @jsx jsx */
import * as React from 'react'
import { css, jsx } from '@emotion/core'
import { Wrap } from './styles'

const Wrap = css`
  background-color: #000;
  color: #fff;
  font-size: 16px};
  &:hover {
    color: #000;
  }
`

const Button: React.FC = ({ children }) => {
  return (
    // css propにstyleを適用
    <button css={Wrap}>{children}</button>
  )
}

export default Button

こんな感じです。