😁やったこと

• Chakraのコンポーネントのfocusの外枠のスタイリング
• 自転車の修理完了したので取りに行った
• kitutuneさんと転職関係の話しをした

😘よかったこと

• 昨日定義したやり方より、簡潔で意図通りに書けて満足している
• 転職活動なにも出来てなかったので貴重な情報聞けてよかった。

👀学びログ

• 昨日のButtonのスタイリングhoverではなくてfocusで定義出来た。

// before code
components: {
    Button: { 
baseStyle: {      
      "&:hover": {
        boxShadow: "0px 0px 0px 2px #639A67",
      },
      } 
    },
  },
//after code
components: {
    Button: {
      baseStyle: {
        _focus: {
          boxShadow: "0px 0px 0px 2px #639A67",
        },
      },
    },
  },

これでしっかりフォーカスされたときのデフォルトの水色から緑に設定することが出来た。

※ちなみにboxShadow の値の備忘録

http://www.htmq.com/css3/box-shadow.shtml

• 逆にcheckboxは大苦戦して結局解決出来ず,githubのissueを見て動くコードで対応した。

グローバルなthemeの部分での定義は一旦断念してプルリクを上げた（悔しい）

気付いたこととしてはcheckboxのコンポーネントは、Buttonと違ってHTML要素が複合してできてるので（厳密に言えばボタンも複合だが）チェックボックスのチェックボックス部分の要素だけにアクセスしなければ行けないので難しい、、

issueのリンクは外部パッケージをつかっても消えないよっていう内容らしい（手強い、、）

[Checkbox] Control still has the blue outline on focus, even wih focus-visible package applied · Issue #2234 · chakra-ui/chakra-ui

外枠だけならこれでいけるらしい