Zenn
🍙

【Chakra UI】コンポーネントをフォーカスした時のアウトラインの色の変更方法

2021/09/27に公開
React
デザイン
Chakra UI
tech

使用環境

  • macOS BigSur 11.6
  • VScode 1.60.2
  • Next.js "^11.1.2"
  • "@chakra-ui/react": "^1.6.5",
  • "@chakra-ui/icons": "^1.0.14",

今回やりたいこと

私が参加しているチームのアプリ開発で、ChakraUIのコンポーネントの要素にフォーカスをあてた時の水色のアウトラインの色を変更したい。

参考記事

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

こちらの記事を参考に今回、Button、CheckBox、Radioのコンポーネントのアウトラインの変更を実装出来たので共有します。

上記参考記事にもあるとおり、ChakraUIでボタンコンポーネントなどを押したりしてフォーカスをあてると水色のアウトラインがデフォルトで設定されています。

今回記事を投稿した背景として、このスタイリングが簡単そうで難しかった　＆　ニッチな内容で関連記事すらほとんどみつからない状態だったので書こうと思った次第です。

実装方法

実装方法としては2つあります。

  1. グローバルで初期値を定義する
  2. 適用したいコンポーネントのタグ内に記述する

...が、2.に関してはgithubのissueから見つけた方法をそのまま記述する以外自分では見つけられなかったのでわかる方いれば教えて下さい。

1.グローバルで初期値を定義する方法

※ChakraUIの基本的な使い方は公式ドキュメントでお願いしますm(_ _)m

export const theme = extendTheme({

components: {
    Button: {
      baseStyle: {
        _focus: {
          boxShadow: "0px 0px 0px 2px #色の指定",
        },
      },
    },
    Checkbox: {
      baseStyle: {
        control: {
          _focus: {
            boxShadow: "0px 0px 0px 3px #色の指定",
          },
        },
      },
    },
    Radio: {
      baseStyle: {
        control: {
          _focus: {
            boxShadow: "0px 0px 0px 3px #色の指定",
          },
        },
      },
    },
  },
});

こんな感じでcomponentsの中のそれぞれの要素にアクセスして定義する。

注意点として、Buttonはfocusが当たるのが要素全体なので簡単だがRadioボタンやCheckBoxはfocusがコンポーネントの要素の一部なので該当の子要素にアクセスしてから定義しないとスタイリングが適応されないです。

Radio、Checkboxはcontrolという要素がアウトラインが適応される要素です。

コンポーネントによっては名前がちがうかもなので、私が参考にしたgithubのリンクを貼っておきます。（公式にも載っているものです）

chakra-ui/packages/theme/src/components at main · chakra-ui/chakra-ui

2.適用したいコンポーネントのタグ内に記述する

こちらに関しては先で述べた通り、githubのissueを抜粋したものでしか動かすことが出来なかったので、あまり参考にならないかと思いますが一応載せておきます。

<Checkbox
  size="sm"
  colorScheme="primary"
  defaultIsChecked
  css={`
    > span:first-of-type {
      box-shadow: unset;
    }
  `}
  >
  Random text
</Checkbox>

抜粋したgithubのリンク

boxShadowの値に上記と同じ値を渡せば適応されます。

ただ、1.で定義したような書き方だと私の力では動かせなかったです（汗）

実装結果

【before】

【After】

こんな感じでスタイリングすることが出来ました。

なかなか細かい部分ですが、こんな感じで細かい部分もスタイリング出来るとデザインの幅が増えていいかもしれないですね。
デザインで使ってみたい方はぜひ参考にしてみて下さい。

Discussion