[Emotion] cssプロパティでエラーが出た場合の対処法

初めに

emotionのバージョンは11です。
11から破壊的な変更が入っているので、それ以前のバージョンを使用してる人は要注意。

以下に簡単なコンポーネントサンプルを示しますが、pタグに渡しているcssプロパティの箇所で「そんなプロパティないよ」とエラーが表示されるケースがあります。

Sample.tsx

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

const Text = css({
  color: "red",
});

export const Emotion = () => {
  return (
    <Container>
      <p css={{ Text }}>Emotion</p>
      <button>Click</button>
    </Container>
  );
};

対処方法

tsconfig.jsonに以下追記する。

tsconfing.json

{
  "compilerOptions": {
    .
    .
    .   
    "jsx": "react-jsx",
    "types": ["@emotion/react/types/css-prop"], // 追記
  },
  "include": ["src"]
}

もしくは、**.d.tsを定義する

src/types/emotion.d.ts

/// <reference types="@emotion/react/types/css-prop" />

以上。