@emotion/reactでコンポーネントの外部からスタイルを受け取る方法

忘れがちなので忘備録的に。
公式ドキュメントにこの方法についての直接的な言及はない（筆者はみつけられなかった）のですが、@emotion/reactの動作原理から考えると簡単に導き出すことができます

やり方

キーとなるポイントは1つだけです。

1. classNameを宣言する

import React from 'react';

type Props = {
  className?: string;
};

function MyCustomComponent(props: Props) {
  const {className} = props;
  return <div className={className} />;
}

たったこれだけです。

なぜ動くのか

emotionの動作順序は、ざっくりと

1. babel-pluginがcssタグテンプレートを解釈してcssを生成する
2. それと対になるclassNameを生成する
3. cssオブジェクトをアサインしているコンポーネントへclassNameを渡す

という感じなので、classNameさえ受け取れるようにしておけば既存のコンポーネントとの協調動作も簡単ですねというわけです。

わかってしまえば簡単なのですが、classNameの宣言を忘れてしまったりしがちなので気をつけましょう。

おまけ

EmotionのTheme機能を使う方は、どこかのファイルで以下のようにdeclarationをmergeしておくとcssの型定義である Interpolation<Theme> がカスタムのものになるので、便利です。

declare module '@emotion/react' {
  interface Theme extends MyProjectTheme {}
}

以上