【CSSinJS】 emotionまとめ

概要

create-react-app(ts)での実装でcomponentのstyleをemotionを使って実現したのでそれの共有。

そもそもemotionって何？

JSXファイルの中にスタイルを直接書き込むタイプのCSSinJSライブラリの一つ
最近だとstyled-componentsはよく聞きますよね。。その中で注目度上げてきてるemotionを発見！！
emotionの機能としてとてもCSS prop形式というのがあるんですが、
なんとstyled-componentsと比べてコンポーネントのマウント速度で約4倍、レンダリング速度で約3倍は速いらしい！
使わないわけにいかないと思い使ってみました。

決まり事

emotionをreactで使うにあたって決まりごとがある

- emotionを使う場合は、`JSX Pragma`が必要
- emotionを使っているコンポーネントではフラグメントを使えない

ここだけ守ればemotionは通常に動作するはずです。

二つ目はなんとなくわかると思うので、一つ目を少し詳しく説明すると
JSX Pragmaとは簡単にいうと「僕, emotionで使ってJSX書いてるよ。少し特殊だからEmotion用のコンパイラ通します」
っていうのを明示的に表しています。emotionを使って書いたJSXファイルの冒頭に下記のように記述する感じです！

/** @jsx jsx */
import { jsx } from '@emotion/core';

※ [注意] 親コンポーネントで JSX Pragma を使 用したら、子のコンポーネントでも JSX Pragma を使わなければなりません

基本的な使い方

適用したいスタイルを定義する。
その変数を適用したいElementにCSS prop形式を使って渡してあげる。
これだけです！！

/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/core';

const heading = css`
  color: #000;
`;

export const Sample: React.FC = () => {
  return <p css={heading}>サンプル</p>
}

共通スタイル適用

少し使い方を工夫すると以下のように、
共通のスタイルを他のスタイルの変数にextendsみたいなことができます！
直感的でわかりやすいですよね！

/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/core';

const base = css`
 margin: 0;
`;

const heading = css`
  ${base}
  color: #000;
`;

export const Sample: React.FC = () => {
  return <p css={heading}>サンプル</p>
}

その他の情報

メディアクエリだって簡単！

/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/core';

const heading = css`
  font-size: 30px;
  @media (min-width: 420px) {
    font-size: 50px;
  }
`;

export const Sample: React.FC = () => {
  return <p css={heading}>サンプル</p>
}

イベントだって簡単！！

/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/core';

const heading = css`
  opacity: 1;
  &:hover {
    opacity: 0.5;
  }
`;

export const Sample: React.FC = () => {
  return <p css={heading}>サンプル</p>
}

アニメーションだって簡単！！！

/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/core';

const heading = css`
  animation: fadeIn 1s linear;
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
`;

export const Sample: React.FC = () => {
  return <p css={heading}>サンプル</p>
}