Emotion

はじめに
Emotion
- インストール
Object Styles
String Styles
styled
まとめ
参考
続く…
- コメント

はじめに

本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含めアウトプットしています。

書籍に記載されている内容を順序立ててまとめるというよりは、整理しておきたい周辺の知識と深ぼった内容を雑多に書いています。

Emotionは、CSS-in-JS（JavaScript内でCSSを記述する手法）の一つで、前回の記事にまとめていたstyled componentと並んで根強い人気があります。

公式: https://emotion.sh/docs/introduction

インストール

emotionにはreact専用のパッケージが用意されています。

yarn add @emotion/react

また、styled componentのような使い方ができるパッケージもあります。

yarn add @emotion/styled @emotion/react

公式: https://emotion.sh/docs/styled

emotionは幅広い書き方に対応していますが、公式で明確に定義されているスタイルに従って解説します。

Object Styles

オブジェクトスタイルでは、スタイルをJavaScriptのオブジェクトとして表現します。

公式: https://emotion.sh/docs/css-prop#object-styles

インポートしたcss関数を使ってCSSのオブジェクトを返し、cssプロパティにを渡しています。

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

const App = () => {
  return (
    <div
      css={css`
        background-color: hotpink;
        &:hover {
          color: lightgreen;
        }
      `}
    >
      これはホットピンクの背景色です。
    </div>
  );
};

export default App;

下記のように変数定義することも可能です。

css関数を使ってスタイルを定義し、styleという変数に格納し、<div>要素のcssプロパティに定義した変数styleを渡しています。

import React from "react";
import { css } from '@emotion/react';

const style = css`
  background-color: hotpink;
  &:hover {
    color: lightgreen;
  }
`;

const App = () => {
  return (
    <div css={style}>
      これはホットピンクの背景色です。
    </div>
  );
};

export default App;

styleの中身（css関数の返り値）は下記のようになっていました。

実際のスタイル情報を格納しているオブジェクトが含まれています。

{name: "vrif1i", styles: "
  background-color: hotpink;
  &:hover {
    color: lightgreen;
  }
", map: undefined, next: undefined, toString: ƒ toString()}

String Styles

文字列スタイルでは、CSSを文字列として直接指定します。

公式: https://emotion.sh/docs/css-prop#string-styles

import React from "react";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const color = 'darkgreen'

const App = () => {
  return (
    <div
      css={css`
        background-color: hotpink;
        &:hover {
          color: ${color};
        }
      `}
    >
      This has a hotpink background.
    </div>
  );
};

export default App;

上記の例では、テンプレートリテラル（``**）で囲まれた文字列を使ってスタイルを指定しています。**css`プロパティに文字列として直接スタイルを渡すことで、スタイルを定義しています。

ホットピンクの背景色と、ホバー時にライトグリーンの文字色が適用されるスタイルが指定された<div>要素を表示しています。

また、変数を使用してスタイルを定義し、その変数をcssプロパティに渡すことも可能です。

import React from "react";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const color = 'darkgreen';
const backgroundColor = 'hotpink';

const style = css`
  background-color: ${backgroundColor};
  &:hover {
    color: ${color};
  }
`;

const App = () => {
  return (
    <div css={style}>
      This has a hotpink background.
    </div>
  );
};

export default App;

上記の例では、css関数を使用してスタイルを定義し、変数 style に格納しています。その後、cssプロパティに定義した変数 style を渡しています。

文字列スタイルは、スタイルを直感的に指定する方法です。テンプレートリテラルを使用することで、動的なスタイルの定義も容易に行うことができます。

styled

下記は@emotion/styledパッケージを使用してReactコンポーネントにスタイルを適用する例です。

styled関数を使用して、div要素にスタイルを適用する新しいコンポーネント CustomDiv を定義しています。

styled.div の形式で定義されたコンポーネントは、指定したスタイルが適用されたdiv要素を生成するために使用されます。

import React from "react";
import { css } from "@emotion/react";
import styled from "@emotion/styled";

const CustomDiv = styled.div`
  background-color: hotpink;
  &:hover {
    color: lightgreen;
  }
`;

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <CustomDiv>This has a hotpink background.</CustomDiv>
    </div>
  );
}