Chakra UIとは

Chakra UIとは、React用のコンポーネントライブラリです。
React用のコンポーネントライブラリの中で、多分一番使われていると思われるのがGoogoleが提唱する「Material Design」というガイドに沿って作成っされたMaterial-UIでは無いかと思います。
今回は、Chakra UIを利用させて頂きました。選んだ理由としては、Githubのスター数、コンポーネントの豊富さ、コンポーネントに手を入れなくても比較的そのままで使えるか、ドキュメントが整ってるかなどです。
しかし、いざChakra UIを導入して、テーマのを変更するのにかなり苦戦したので、同じ所でハマっている方がいれば参考にしていただければ幸いです。

themeファイルでテーマのをカスタマイズ

Chakra UIはドキュメントがしっかりしているので、問題なく利用できると思いますが、コンポーネントをオーバーライドする場合の説明があまりなく、苦戦しました。
こちらのページにコンポーネントのオーバーライド方法が記載されてはいるのですが、ボタン以外のコンポーネントで期待通りに動かない結果になりました。

記載されているButtonコンポーネントを参考に、他コンポーネントも設定しましたが、全然適用されませんでした。調べていくとどうやら、コンポーネント事に微妙に記述の違いがある様です。

結果的に動いたファイルは下記

// theme.js
import { extendTheme } from "@chakra-ui/react"
const theme = extendTheme({
    styles: {
    	global: {
	    	body: {
	    		fontFamily: "'游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif",
	    		fontSize: "0.8125rem",
	    		lineHeight: "1.5",
	    	},
    	},
    },
    components: {
    	Heading: {
    		baseStyle: {
    			fontWeight: 'normal',
    		},
    		sizes: {
    			sm: {
    				fontSize: '1.125fem',
    			},
    			md: {
    				fontSize: '1.375fem',
    			},
    			lg: {
    				fontSize: '1.625fem',
    			},
    			xl: {
    				fontSize: '1.875fem',
    			},
    		},
    	},
    	Text: {
    		sizes: {
    			xs: {
    				fontSize: '0.625rem',
    			},
    			sm: {
    				fontSize: '0.8125rem',
    			},
    			md: {
    				fontSize: '0.8125rem',
    			},
    			lg: {
    				fontSize: '0.625rem',
    			},
    			xl: {
    				fontSize: '1.125rem',
    			},
    		},
    	},
    	Table: {
    		baseStyle: {
    			table: {
    				color: 'gray.400',
    			},
    			th: {
    				fontWeight: 'normal',
    				bgColor: 'gray.100',

    			},
    		},
    	},
    },
})
export default theme

上記のthemeファイルをappファイルに読み込めば、適用されました。

components→コンポーネント名→baseStyleで動くコンポーネントもあれば、components→コンポーネント名→baseStyle→要素名で動く場合もあり、そこが苦戦しました。

是非上記を参考にしていただければ幸いです。