🧙
【chakra-ui】custom themeの型を生成したい！
【chakra-ui】custom theme の型を生成したい！
V1.2.0 から chakra-ui/cli で theme の型生成ができるようになったようです。
ドキュメントでは、npm モジュールとして chakra-theme-package を導入する流れが記載されていますが、一般的に同じリポジトリ内に theme を設定することが多いかと思うのでそのやり方をメモしておきます。
まずは @chakra-ui/cli をインストールします。
yarn add --dev @chakra-ui/cli
そうすると、cli が使えるようになります。
以下のコマンドを叩いてみてください
chakra-cli tokens <path/to/your/theme.(js|ts)>
僕の場合は以下のような path 指定です。
chakra-cli tokens ./src/styles/theme.ts
うまくいくと、このように表示されます。
あとは、npm-run-allなどで start しているなら、
...
"dev": "run-p dev:*",
"dev:gen:theme-typings": "chakra-cli tokens ./src/styles/theme.ts",
...
このように設定すれば、theme の型生成が設定されます。
注意点ですが、👆 の生成タイミングは start 時のみなので、theme を修正した場合、もう一度 start し直してください。
watch gen する良い設定方法あれば、編集リクエストお待ちしています 🙌
Discussion