radix 의 기본 focus css 제거하기

매우 열받는 상황

'@radix-ui/react-slider' 라이브러리를 이용하던 중 일어난 일입니다.

radix가 제공해주는 slider primitive를 이용하여 슬라이더를 구현하던 중 이런 상황을 마주했습니다.

굉장히 열받는 원이 생겨있는것을 확인할 수 있었는데요

이걸 대체 어떻게 지울 수 있을까 공식문서를 찾아봐도 전혀 안내가 없어서 절망했습니다만..

자세하게 예제코드를 들여다보면서 내 코드에 빠진 게 뭘까 찾아본 결과 알아냈습니다.

import React from 'react';
import * as Slider from '@radix-ui/react-slider';

const SliderDemo = () => (
  <form>
    <Slider.Root
      className="relative flex items-center select-none touch-none w-[200px] h-5"
      defaultValue={[50]}
      max={100}
      step={1}
    >
      <Slider.Track className="bg-blackA10 relative grow rounded-full h-[3px]">
        <Slider.Range className="absolute bg-white rounded-full h-full" />
      </Slider.Track>
      <Slider.Thumb
        className="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA7 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA8"
        aria-label="Volume"
      />
    </Slider.Root>
  </form>
);

export default SliderDemo;

슬라이더에서 제가 거슬리던 부분은 바로 Thumb입니다.

Thumb를 클릭하면 저런 윤곽선이 생기던 상황이었습니다.

다음 코드는 radix에서 제공해주는 slider 의 기본 예제인데요

 

thumb 의 테일윈드 클래스를 잘 살펴보면 

focus:outline-none 이라는 클래스가 들어가있는것을 확인할 수 있습니다.

포커스 상태일때에 아웃라인 css를 주지않겠다라는 의미로 볼 수 있는데요

 

혹시나해서 적용해본 결과

 

열받는 윤곽선이 사라진 것을 확인할 수 있었습니다.

이런건 좀 제발 문서에 적어놔줘!!!!!!!!!!!!!