ChakraUIでカスタムテーマを追加+コード補完を効かせる

はじめに

ChakraUIでカスタムカラーを追加した際に、色自体はスタイルとして反映されたのですが、補完コードの中に定義したはずの色が出てきませんでした。文字列をベタ打ちとなるとタイプミスが増えたり、チーム開発する場合にかなり不便に感じたので、今回はカスタムで追加したスタイルをChakraUIコンポーネントのpropsのコード補完に表示させるまでの一例になります。

1. テーマ拡張

Theme.ts

import { extendTheme, theme as baseTheme } from '@chakra-ui/react';
export const theme = extendTheme({
  colors: {
    bg_base: baseTheme.colors.green[500],
  },
});

この時点ではbg_baseを使用することはできますが、コード補完に出てきません。

2. CLIインストール

npm i -D @chakra-ui/cli

3. package.jsonに追加

ウォッチモードで生成することもできます。

package.json

"scripts": {
  "gen:theme-typings": "chakra-cli tokens ./src/styles/Theme.ts",
  "gen:theme-typings:watch": "chakra-cli tokens ./src/styles/Theme.ts --watch",
},
"dependencies": {
  "@chakra-ui/react": "^2.8.2",
},
"devDependencies": {
  "@chakra-ui/cli": "^2.4.1",
}

npm run gen:theme-typings
OR
npm run gen:theme-typings:watch

この時点でもコード補完が効かない場合、以下のファイルを開く or 開き直してみてください。(VSCode側の問題??)

node_modules/@chakra-ui/styled-system/dist/theming.types.d.ts

export interface ThemeTypings extends BaseThemeTypings {
  ...
  colors:
    | 'transparent'
    | 'current'
    ...
    | 'bg_base' //今回の場合、colorsに追加されていれば、補完コードに表示されます。

完了

コード補完にカスタムで追加したスタイルが表示されます。