emotion の使い方

1. emotion

「emotion」はJavaScriptでCSSを記述するためのライブラリです。
「emotion」を使用方法は2つあります。

・Framework Agnostic
・React

今回は、「React」を使います。

2. emotionのインストール

Reactのプロジェクトを作成後、以下のコマンドで「emotion」をインストールします。

$ npm install --save @emotion/core

3. はじめてのemotionのコード

はじめての「emotion」のコードは次のとおりです。
ホバーで文字色が変更するスタイルを指定しています。

// このコメントでJSXに変換するようにBabelに指示
/** @jsx jsx */
import { css, jsx } from '@emotion/core';

const hoverStyle = css({
  padding: '32px',
  backgroundColor: 'hotpink',
  fontSize: '24px',
  borderRadius: '4px',
  "&:hover": {
    color: 'white'
  },
});

function App() {
  return (
    <div css={hoverStyle}>ホバーで色変更</div>
  );
};

export default App;

「@emotion/core」のインポートの上に「/** @jsx jsx */」という「JSX Pragma」を付加することで、コンパイル時にJSXに変換しています。

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

CSSのスタイルセットは次のように定義します。

const hoverStyle = css({
  padding: '32px',
  backgroundColor: 'hotpink',
  fontSize: '24px', 
  borderRadius: '4px',
  "&:hover": {
    color: 'white'
  },
});

定義したスタイルを「css={スタイル}」で指定することができます。

<div css={hoverStyle}>ホバーで色変更</div>