React x Typescriptで@emotion/coreを使用するために。

cssが認識されずにハマったので共有。
こちらの記事で解決。
cssを認識させるために、jsxに解釈させる必要があるらしい。
Emotion v10 unusable with pure TypeScript · Issue #1046 · emotion-js/emotion · GitHub

tsconfig.jsonにjsxFactoryを追加

"jsxFactory": "jsx",

コンポーネントファイルごとにpragmaを宣言する

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

const theme = css`
    width: 100vw;
    height: 100vh;
    background-color: #000;
`;

const App: React.FC = () => {
  return (
    <div css={theme}>
      <p>hello</p>
    </div>
  );
}

export default App;

pragmaとは？

A pragma is a compiler directive. It tells the compiler how it should handle the contents of a file.
プラグマはコンパイラ指令です。ファイルの内容を処理する方法をコンパイラに指示します。

jsx pragmaはコンパイラにjsxと解釈させるために必要なもの。