当サイトは、アフィリエイト広告を利用しています

Emotionの使い方~TypeScript~

作成日：2023月04月27日
更新日：2024年02月07日

CSS in JSのEmotionをReact x TypeScriptで使う際に
propsでemotionのstyle(cssprops)を受け取る方法をまとめる。

Emotionではstyleの定義方法として下記の3つがある

  • StringStyles
  • ObjectStyle
  • styled-component

個人的には「StringStyles」が一番使いやすいので
「StringStyles」を使っている。

ので、今回はEmotionのStringStylesをTypeScriptで使う方法を メモしておく。

「ObjectStyle」や「styled-component」の基本的な使い方や
「StringStyles」の実装サンプルについては下記記事で紹介しています。
※javascriptでの実装です。

React x TypeScriptでpropsでEmotionのstyleを渡す方法

Emotionのstyleをpropsでコンポーネントにで受け取るためには
Emotionのstyleの定義をしてやる必要がある。

javascriptの場合と比較してみる。

javascriptの場合

Emotionでcsspropsでstringstyleの定義を使う場合は
javascriptでは下記のようになる。

emotion_js_sample
import { css} from "@emotion/react";


//コンポーネント
const EmotionPropsComponent1 = (props) => {
  //emotionのstyleを受け取る
  const { cssStyleFunc } = props;


  return <h1 css={cssStyleFunc}>Emotion_cssprops_javascript</h1>;
};


export function App() {
  //emotionでstyle定義
  const emostyle = () => [
    css`
      color: blue;
    `
  ];


  return (
    <div>
      <EmotionPropsComponent1 cssStyleFunc={emostyle} />
    </div>
  );
}

TypeScriptの場合

上記のjavascriptをTypeScriptで書くと

error
//コンポーネント
const EmotionPropsComponent1 = (props) => {
  //emotionのstyleを受け取る
  const { cssStyleFunc } = props;


  return <h1 css={cssStyleFunc}>Emotion_cssprops_javascript</h1>;
};

propsで型定義を書けといういエラーになる。
※anyを書けばエラーは消えるが、それだとTypeScritpを使う意味がないので

Emotionのstyleの型を定義する

エラーを消すためには、Emotionのstyleの型を定義する必要がある。

Emotionのstyleの型は下記のようになっている

node_modules/@emotion/utils/types/index.d.ts
~
export interface SerializedStyles {
  name: string
  styles: string
  map?: string
  next?: SerializedStyles
}
~

SerializedStylesをimportして使うことでエラーを解消できる。

emotion_ts_sample
/** @jsxImportSource @emotion/react */
import { css, SerializedStyles } from "@emotion/react";


//emotionのstyleの型定義
type cssStyleFunc = (str?:string) => SerializedStyles[]


//propsの定義
type EmProps = {
  cssStyleFunc: cssStyleFunc;
};


//コンポーネント
const EmotionPropsComponent1 = (props: EmProps) => {
  //emotionのstyleを受け取る
  const { cssStyleFunc } = props;


  return <h1 css={[cssStyleFunc()]}>Emotion_cssprops_TypeScript</h1>;
};


export function App() {
  //emotionでstyle定義
  const emostyle: cssStyleFunc = () => [
    css`
      color: blue;
    `
  ];


  return (
    <div>
      <EmotionPropsComponent1 cssStyleFunc={emostyle} />
    </div>
  );
}
  • SerializedStylesをimportする
  • SerializedStylesを使って型定義する
実装サンプル

実装サンプルを載せます

emotion_ts_sample

SerializedStylesを使った型定義サンプル

Emotionのcsspropsの渡し方はいろいろとパターンがあるので
パターンごとのサンプルを載せる。

Emotionのstyleの配列を返す関数で受け取る場合

個人的にはEmotionを使う時にはこの書き方をする。
※上記の「実装サンプル」もこの方式で書いています。

型定義
import { css, SerializedStyles } from "@emotion/react";


//emotionのstyleの型定義
type cssStyleFunc = (str?: string) => SerializedStyles[];


//propsの定義
type EmProps = {
  cssStyleFunc: cssStyleFunc;
};
  • 配列を返す関数にしておけば、引数を追加したい場合にも対応できる。

受け取る側も配列で受け取るようにする

コンポーネント側
//コンポーネント
const EmotionPropsComponent1 = (props: EmProps) => {
  //emotionのstyleを受け取る
  const { cssStyleFunc } = props;


　//インラインでスタイル追加
  return <h1 css={[cssStyleFunc(),css`background:red`]}>Emotion_cssprops_TypeScript</h1>;
};
  • 配列で受け取るようにしておけば、追加のスタイルをつけたい場合も柔軟に対応できる

Emotionのstyleの配列を返す関数（引数あり）で受け取る場合

「Emotionのstyleの配列を返す関数で受け取る場合」と同じ型定義を使う 実装サンプルをのせときます

emotion_ts_func_sample

Emotionのstyleの配列で受け取る場合

関数ではなく配列で受け取ることもできる。

emotion_ts_func_array
/** @jsxImportSource @emotion/react */
import { css, SerializedStyles } from "@emotion/react";


//propsの定義
type EmProps = {
  cssStyleArray: SerializedStyles[];
};


//コンポーネント
const EmotionPropsComponent1 = (props: EmProps) => {
  //emotionのstyleを受け取る
  const { cssStyleArray } = props;


  return <h1 css={[cssStyleArray]}>Emotion_cssprops_TypeScript</h1>;
};


export function App() {
  //Emotionのstyleの配列を受け取る場合
  const emostyle: SerializedStyles[] = [
    css`
      color: white;
    `
  ];


 //スタイル追加 
 emostyle.push(css`background-color:blue`)


  return (
    <div>
      <EmotionPropsComponent1 cssStyleArray={emostyle} />
    </div>
  );
}
  • 配列なのでstyleを追加することができる。

emotion_ts_array

Emotionのstyleを受け取る場合

関数や配列ではなく、SerializedStylesのままでも受け取ることはできる。

emotion_ts_stringstyle
/** @jsxImportSource @emotion/react */
import { css, SerializedStyles } from "@emotion/react";


//propsの定義
type EmProps = {
  cssStyleArray: SerializedStyles;
};


//コンポーネント
const EmotionPropsComponent1 = (props: EmProps) => {
  //emotionのstyleを受け取る
  const { cssStyleArray } = props;


  return <h1 css={cssStyleArray}>Emotion_cssprops_TypeScript</h1>;
};


export function App() {
  //Emotionのstyleを受け取る場合
  const emostyle: SerializedStyles = css`
    color: blue;
  `;
  return (
    <div>
      <EmotionPropsComponent1 cssStyleArray={emostyle} />
    </div>
  );
}
  • 柔軟に変更ができないので、配列や関数の形の方が良い気がする。

サンプルのせときます

emotion_ts_stringstyle

まとめ

Emotionのcsspropsではいろいろな書き方ができるので
実現したい仕様に合わせて、自分の使いやすい使い方をすれば
良いと思う。
Emotionの使い方のサンプルについては下記記事でも紹介しているので
当記事で合わせて見ればTypeScript対応できると思う。

新着記事

タグ別一覧
top