CSS in JSのライブラリでstyled-componentsをずっと使ってましたが、emotionの方が軽いというのを聞き使ってみました。
具体的に何がどういいのかはまだ体感してないですが、ざっと調べたところ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
こんな感じです。