Theme UIをReact×TypeScriptのプロジェクトで使う。

ことの経緯

React × TypeScript のプロジェクトでRebass使おうかな。
↓
Rebassの開発者さんが最近開発しているのはTheme UIらしい。
参考 : Theme UI で Theme Driven な快適 React スタイリング生活
↓
Theme UI使ってみよう。
↓
動かない（表示されない）。。。
↓
動かそう!!!

※ TypeScriptでTheme UIを導入するときの注意点くらいの記事です。

インストール方法

公式サイトのGetting Startedには以下のコマンドが記載されている。

$ npm i theme-ui

TypeScriptだと、@types/~という別のパッケージが用意されている場合があるが、
Theme UIだと同じコマンドでインストールできる模様。

補足1）
なぜだか、最初はtheme-uiだけだとコンパイルエラーが出た。
なので公式のTypeScriptのページにあった
codesandboxのリンクの中見て、"@theme-ui/cssも合わせてインストールした。
コンパイルエラーは解消されたが、いろいろやって後からアンインストールしてもtheme-uiの部分動いたので、実際は必要なかった。

補足2）
@types/theme-uiというパッケージもあったが、インストールしてみると、
theme-ui provides its own type definitions, so you don't need @types/theme-ui__color installed!という親切なメッセージが出てくる。

設定ファイルの変更

インストール後、Theme UIの記述を試してみるもコンパイルエラーが出てくる。
エラーメッセージで指摘されるのはsx propsの部分。

原因を一言でいうと、JSX Pragmaの部分にある。

JSX Pragma
Theme UIに限った話ではないようだが、JSXを独自に拡張したものらしい。
（Theme UIではsx propsを指定できるように作られている）
機能させるには適切に設定を追加する必要がある。

※ JSX Pragmaの詳しい説明は以下の公式情報を参照ください。
JSX Pragma

今回はTypeScriptを利用しているので、tsconfig.jsonに以下の設定を追加。

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "theme-ui"
  }
  // ...
}

また、合わせて、ファイルの先頭にカスタムプラグマコメントを書く必要がある。
（私は上記の設定のみでは動かなかった）
Theme UIのカスタムプラグマコメントは以下。

/ ** @jsxImportSource theme-ui * /

余談)
最初は、pragma and pragmaFrag cannot be set when runtime is automatic.といったコンパイルエラーが出てきて。なかなか正解に到達できなかった。（React17以降でカスタムプラグマコメントを利用したときに出てくるらしい）

まとめ

結果的にTypeScriptで開発するときは以下の公式情報を読めってことみたい。
JSX Pragmaに気付かない場合があるので、そこだけ注意しておけば私みたいに引っかからないはず。
Getting Started
(Theme UIの)TypeScript
JSX Pragma