Chakra UI：ボタンなどデフォルトのブルーのアウトライン（フォーカスポイント）を消したい

使用環境

・MacOS BigSur（11.5.2） ・VScode（1.59.1） ・Node.js (16.1.1） "@chakra-ui/icons": "^1.0.15", "@chakra-ui/react": "^1.6.6"

はじめに

最近、Next.js（React）を使ったプロジェクトでChakra UIを使用しています。
Chakra UIでは、クリック時にButtonコンポーネントやInputコンポーネントなど対象のコンポーネントで、デフォルトでブルーのアウトライン（フォーカスポイント）が入ってしまいます。こんなふうに。

デザインの使用色やUIのバランスなどの観点から、ちょっと気持ち悪いなと感じたので、消す方法がないかリサーチをしました。
しかし、このことについて触れている記事は少なくとも自分が調べた限りはなかったので今回の記事を書きました。（もしありましたら教えていただけると幸いです🙇‍♂️）

結論/解決策

サクッと解決策からお伝えすると、２つ方法があります。

以下のstyle props
_focus={{ boxShadow: "none"}} もしくは _focus={{ _focus: "none"}}を

①アウトラインを消したいコンポーネントのタグ内に記述すること

②Customize Themeとしてコンポーネント名でbaseStyleをグローバル適用する

①実装例）

<IconButton
	_focus={{ boxShadow: "none"}} //これを記述する
	aria-label="DarkMode Switch"
	icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
	onClick={toggleColorMode}
/>

②実装例）

export const bodyTheme = extendTheme({
	components: {
		Button: { baseStyle: { _focus: { boxShadow: 'none' } } }　//これを記述し、Globalで適用
	}
})

個人的にはいちいちコンポーネントにこれを記載するよりもGlobal適用してしまえば済む②の方法がお勧めです。
※しかし②の方法はButtonコンポーネントには効きますが、IconButtonやInputやSelectは同じ方法では効きませんでした。。（①の方法は大丈夫です。）どなたかわかる方がいたら教えて欲しいです🙇‍♂️

最後に

調べていた際に、このChakra UIのGitHubレポジトリIssue#708に行きついて興味深い発見があったので紹介しておきます。

Chakra UIのDeveloper(＠with-heartさん)の人いわく、そもそもこれは、キーボードだけで操作するユーザーのため（今どの場所にフォーカスしているか分かりやすくするため）に、デフォルトで導入しているそうです。

ただ、Blue outline borders around all clickable components ugly（笑）などというIssue名に上がっているように、気持ち悪いと思っている人は多いみたいです。

去年からみんなで色々試行錯誤してなんとか（Developerの方が頑なに拒否する中）、遠回りにデフォルトのこの設定を外す方法を模索していたみたいです。

ちなみに、focus-visible をライブラリパッケージとして導入する方法もあるみたいなので気になる方はみてみてください。
Accessibility on-demand with Chakra-ui and focus-visible

自分は公式ドキュメントのStyle Propsの記事の下〜の隅っこの方をたまたま見ていてこのやり方をみつけましたが（v1へのアップデートと同時に公式Docアップデートされた？）、ちょうど7日前に同じ解決策見つけてる人がいたのでこれで間違いないと思います。

ただ、Developerさんの言うように、**"アウトラインを取り除くことはマウスユーザーなどユーザー体験を損ねる"**ということは念頭においておかないといけません。
なんでもかんでも気持ち悪いからって自分好みで消してしまうのは良くないことを学びました。
使い所を検討して導入していくことをお勧めします。

Developerさんがシェアしていた記事
Quick Tip: Never remove CSS

参考資料

• Chakra UI公式DOC Style Props
• Chakra UIのGitHub公式レポジトリ Blue outline borders around all clickable components ugly #708
• Medium Accessibility on-demand with Chakra-ui and focus-visible
• Quick Tips: Never remove CSS