Tailwind 클래스로 Algolia React 구성 요소 사용자 지정

지난 주에 Algolia의 파리 사무실에 있는 동안 Front-end Experience 팀에서 UI에서 Algolia의 React 위젯을 스타일링하는 멋진 트릭을 보여주었습니다. 바로 사용할 수 있는 Algolia는 검색 환경(Algolia 및 Satellite)과 사용자 지정 테마를 생성할 수 있는 기능을 위해 사전 구축된 두 가지 테마를 제공합니다. 최근 프런트 엔드 경험 팀은 Algolia React 구성 요소에 injecting custom CSS classes을 사용하여 UI 스타일을 지정하는 세 번째 방법을 추가했습니다.

이것은 Bootstrap 및 Tailwind 과 같은 클래스 기반 CSS 프레임워크를 사용하는 사람들에게 희소식입니다! 내 경우에는 스타일링을 위해 Tailwind에 의존하는 AlgoliaEcommerce UI Template로 작업하고 있었습니다. Algolia Recommend UI 라이브러리의 위젯<TrendingFacets>을 내 홈페이지에 추가하고 싶었지만 나머지 프런트 엔드와 일치하도록 Tailwind 클래스를 사용하여 스타일을 지정하고 싶었습니다.

스타일링 전의 모습은 다음과 같습니다.



나는 확실히 더 잘할 수 있습니다! 이를 위해서는 구성 요소에 classNames 특성을 사용해야 합니다. Algolia의 모든 React 위젯(권장 포함)에서 사용할 수 있으며 구성 요소별 요소의 스타일을 재정의할 수 있습니다. Vanilla JavaScript( cssClasses ) 및 Vue( class-names )와 같은 다른 프런트 엔드 API 중 일부는 수년 동안 이 기능을 가지고 있었으며 이제 React 후크를 추가한 최신 업데이트 덕분에 React에서 사용할 수 있습니다.

설명서에는 각 Algolia 위젯에 대해 재정의할 수 있는 요소가 나열되어 있습니다. 예를 들어 <SearchBox> 위젯의 요소는 다음과 같습니다.

root: 위젯의 루트 요소입니다.

양식: 양식 요소입니다.

입력: 입력 요소입니다.

제출: 제출 버튼입니다.

재설정: 재설정 버튼입니다.

loadingIndicator: 로딩 표시 요소입니다.

submitIcon: 제출 아이콘입니다.

resetIcon: 재설정 아이콘입니다.

loadingIcon: 로딩 아이콘입니다.

내 <TrendingFacets> 위젯의 경우 공간을 절약하기 위해 수평선에 있는 목록을 원하므로 flex 클래스를 list 요소에 추가합니다. 또한 새 클래스facetItem를 추가하여 간단한 호버 스타일로 각 클래스item에 깔끔한 캡슐 모양을 부여할 것입니다. 다음은 스타일 지정 후 내 구성 요소의 모습입니다.



코드는 다음과 같습니다.

<TrendingFacets
  classNames={{ list: 'flex', item: 'facetItem' }}
  recommendClient={recommendClient}
  indexName={indexName}
  maxRecommendations={3}
  itemComponent={({ item }) => (
    <a href={item.facetValue}>{item.facetValue}</a>
  )}
  facetName={facetName}
/>

Algolia 위젯의 스타일을 사용자 정의하기 위해 classNames를 추가하는 것은 특히 저와 같이 프런트 엔드 스타일 지정을 위해 Tailwind CSS에 중독된 사람들에게 매우 의미가 있습니다. Algolia documentation에서 위젯에 사용자 정의 CSS 클래스를 추가하는 방법에 대해 자세히 알아볼 수 있습니다. Algolia를 처음 사용하는 경우 free tier account에 가입하여 사용해 볼 수 있습니다.

댓글에서 스타일이 잘 갖춰진 검색 환경의 다른 예를 보고 싶습니다.