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의 밸런스 등의 관점에서, 조금 기분 나쁘다고 느꼈으므로, 지울 방법이 없는지 리서치를 했습니다.
그러나 이에 대해 언급하고 있는 기사는 적어도 자신이 조사한 한은 없었기 때문에 이번 기사를 썼습니다. (만약 있으면 가르쳐 주시면 다행입니다 🙇‍♂️)

결론/해결

바삭 바삭한 해결책에서 말하면 두 가지 방법이 있습니다.

다음 스타일 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 님이 공유한 기사
빠른 팁 : 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