emotionの型エラーが出たとき・スタイルが反映されないときの対処法

バージョン

@emotion/react： 11.4.0

型エラーが出たとき

tsconfig.jsonに以下を追記。

{
  "compilerOptions": {
    //・・・
    "types": ["@emotion/react/types/css-prop"],
   }
}

コンパイルされないとき

emotionのコンパイルはemotion独自のコンパイラを通す必要があるみたいです。

ソースコードの頭で以下の宣言をするとスタイルが効きます

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

const App = () => {
  return (
    <div>
      <p css={css`color: green;`} >hello</p>
     </div>
   )
}

この頭に書いたものを「JSX Pragma」というそうです。