헤드리스 구성요소를 쉽게 스타일링할 수 있도록 만들기

헤드리스 구성요소는 단순히 스타일이 지정되지 않은 구성요소인가요, 아니면 그 이상의 의미가 있나요?

웹에서는 스타일 정의를 요구하여 이미 스타일과 콘텐츠를 분리하고 있습니다
HTML 대신 CSS로. 이 아키텍처를 통해 각 웹페이지는 글로벌
페이지별 스타일을 정의하지 않고 디자인 표준을 따릅니다.

웹이 애플리케이션 플랫폼으로 진화하면서 개발자들은 이를 만들 수 있는 방법을 모색했습니다.
점점 늘어나는 코드베이스를 더욱 유지 관리하기 쉽게 만듭니다. 요즘
의 사실상의 전략은 애플리케이션 코드를 구성하는 것은
함께 구성하세요. 그리하여
에서는 컴포넌트가 구성의 단위가 되었습니다. 현대적인 웹 개발.

구성요소는 캡슐화를 위해 HTML과 CSS를 모두 정의하는 경우가 많습니다.
이렇게 하면 작성하기가 더 쉬워지지만 작성하기가 더 어려울 수 있습니다
기존 디자인 시스템에 일관되게 통합합니다. 특히 그렇습니다
외부 공급업체에서 수입한 타사 구성 요소용.

헤드리스 구성요소는
콘텐츠와 스타일. 그러나 이제 분리는
과 같이 구성 요소 경계를 따라 이루어집니다. HTML과 CSS 사이에 반대됩니다. 이는 훌륭한 헤드리스 구성 요소를 만드는 데 핵심입니다
개발자가
자신만의 스타일을 명확하고 쉽게 적용해보세요.

관련 소품 전달

가장 기본적인 의미에서 헤드리스 구성 요소는 단순히 스타일이 지정되지 않은 구성 요소입니다.
개발자는
HTML 요소에 자신만의 CSS를 적용할 수 있어야 합니다. 구성요소가 정의됩니다.

간단한 구성 요소의 경우 간단히 className을 전달하면 됩니다
개발자가
에서 클래스 선택기를 사용할 수 있도록 루트 요소에 추가합니다. CSS.

구성 요소가 기본 HTML 요소와 동일한 의미를 갖는 경우 다음을 사용할 수 있습니다
모든 관련 소품이 있는지 확인하기 위한 React의 ComponentProps 유형
전달 가능. 사용자에게 원하지 않는 소품은 생략하세요.
구성 요소를 재정의할 수 있습니다.

import { type ComponentProps } from 'react'

function SubmitButton({ ...props }: Omit<ComponentProps<'button'>, 'type'>) {
  return <button type="submit" {...props} />
}

사전 정의된 클래스 제공

하나 이상의 하위 요소가 포함된 구성 요소의 경우 개발자는 아마도
각 요소의 스타일을 개별적으로 지정하고 싶습니다.

이를 지원하는 한 가지 전략은
CSS 결합자.
예를 들어, 헤드리스 갤러리 구성 요소는 다음과 같이 스타일이 지정될 수 있습니다.

/* Root container */
.gallery {
}

/* Gallery items container */
.gallery > ul {
}

/* Gallery item */
.gallery > ul > li {
}

/* Next and Previous buttons */
.gallery button {
}

그러나 이 접근 방식은 이제
의 내부 HTML 구조가 변경되었기 때문에 큰 문제를 야기합니다. 구성 요소는 공개 API의 일부입니다. 이렇게 하면
잠재적으로 다운스트림 코드를 손상시키지 않고 나중에 구조를 구성합니다.

더 나은 전략은 각 주요 하위 요소에 대한 클래스를 미리 정의하는 것입니다. 이쪽으로
개발자는 특정 HTML에 의존하지 않고 클래스 선택기를 사용할 수 있습니다
구조:

.xyz-gallery {
}

.xyz-gallery-next-button {
}

.xyz-gallery-previous-button {
}

.xyz-gallery-items-container {
}

.xyz-gallery-item {
}

클래스와 충돌하지 않도록 클래스 앞에 접두사를 붙이는 것을 잊지 마세요.
개발자 자신의 스타일.

사용자 정의 레이아웃 지원

사전 정의된 클래스를 제공하는 것은 아마도 개발자가 다음을 수행할 수 있는 가장 빠른 방법일 것입니다.
구성요소에 스타일을 지정하세요. 그러나 이 접근 방식의 단점은
HTML 구조는 사용자 정의할 수 없습니다.

이건 중요하지 않을 수도 있습니다. 결국, 일반 HTML은 이미 그 방식이 상당히 유연합니다
렌더링될 수 있습니다. 그러나 때로는 개발자가 추가 HTML을 순서대로 사용하는 경우도 있습니다
특정 디자인을 달성하기 위해. 거의 모든 소스 코드를 보면
웹사이트를 방문하면 의미 없는

요소
유일한 목적은 플렉스 또는 그리드 레이아웃을 정의하고 하위 항목을 시각적으로 그룹화하는 것입니다
테두리 내의 요소를 추가하거나 새로운 스태킹 컨텍스트를 생성하세요.

헤드리스 구성 요소를 다음으로 분할하여 이러한 사용 사례를 지원할 수 있습니다.
여러 관련 구성 요소. 이런 방식으로 개발자는 자유롭게 자신의 것을 추가할 수 있습니다
레이아웃 요소를 구성 요소에 추가합니다. 예를 들어 개발자는 Next 및
사용자 정의 Flexbox 컨테이너 내 갤러리 예제의 이전 버튼:

<Gallery>
  <GalleryItems className='gallery-items-container'>
    {data.map((item) => (
      <GalleryItem key={item.id}>{item.content}</GalleryItem>
    ))}
  </GalleryItems>
  <div className='gallery-buttons-container'>
    <GalleryPreviousButton>
    <GalleryNextButton>
  </div>
</Gallery>

.gallery-items-container {
}

.gallery-buttons-container {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

이러한 종류의 구성 요소는 일반적으로 다음을 사용하여 구현됩니다.
통과할 컨텍스트
그들 사이의 데이터. 설계, 구현 및
에 더 많은 작업이 필요합니다. 문서. 그러나 결과적으로 다재다능하다는 것은 종종 추가 노력이 필요하다는 것을 의미합니다
그만한 가치가 있습니다.

구성 요소 재정의 허용

일부 사용 사례에서는 헤드리스 구성 요소가 레이아웃을 관리해야 합니다
하위 구성요소 중 하나입니다. 예를 들어
드래그 앤 드롭을 통해 항목을 재정렬할 수 있습니다. 또 다른 사용 사례는
단일 페이지 애플리케이션이 기본 앵커 요소를
클라이언트측 라우팅을 용이하게 하는 사용자 정의 링크 구성 요소입니다.

An advanced strategy for allowing developers to define custom layouts is to
allow the actual child component being rendered to be overriden via props:

<TreeView
  nodes={[...]}
  components={{
    CustomRow,
    CustomDragPreview: (props) => <div className="drag-preview" {...props} />
  }}
/>

This grants the developer full control over what is rendered in each child
component, while allowing the headless component to manage its overall
structure.

You can even allow developers to customise the root element of your component
via a prop. For example, this button component allows a developer to render it
as something else:

import { type ElementType } from 'react'

function HeadlessButton({ as, ...props }: { as?: ElementType }) {
  const Component = as ?? 'button'
  return <Component {...props} />
}

For example, in order for assistive technology to treat the button like a link,
the developer can specify that an anchor element should be used to render the
button:

<HeadlessButton as="a">Actually a link</HeadlessButton>

Summary

Headless components are much more than components that don't contain any
styles. Great headless components are fully extensible and allow the developer
to customise the entire internal HTML structure.

위 내용은 헤드리스 구성요소를 쉽게 스타일링할 수 있도록 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html define if for while require using class public internal Interface number default this border flex

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.