Dadurch lassen sich kopflose Komponenten einfach stylen-CSS-Tutorial-php.cn

Making headless components easy to style

Ist eine Headless-Komponente einfach eine nicht gestylte Komponente, oder steckt da noch mehr dahinter?

Das Web trennt bereits Stil vom Inhalt, indem es die Definition von Stilen erfordert
in CSS statt HTML. Diese Architektur ermöglicht es jeder Webseite, ein globales
zu übernehmen Designstandard, ohne seitenspezifische Stile zu definieren.

Als sich das Web zu einer Anwendungsplattform entwickelte, suchten Entwickler nach Möglichkeiten,
zu erstellen ihre wachsenden Codebasen sind wartbarer. Heutzutage ist die De-facto-Strategie für
Beim Organisieren von Anwendungscode geht es darum, kleine, leichte Komponenten zu definieren, die
können zusammen komponiert werden. Somit wurde die Komponente zur Kompositionseinheit in
moderne Webentwicklung.

Komponenten definieren oft sowohl ihr HTML als auch ihr CSS im Interesse der Kapselung.
Dadurch sind sie zwar einfacher zu komponieren, können aber auch schwieriger zu komponieren sein
schlüssig in ein bestehendes Designsystem integrieren. Dies gilt insbesondere
für Komponenten von Drittanbietern, die von externen Anbietern importiert werden.

Headless Components lösen diese Herausforderung, indem sie wieder eine Trennung zwischen
einführen Inhalt und Stil. Jetzt erfolgt die Trennung jedoch entlang der Komponentengrenze als
im Gegensatz zwischen HTML und CSS. Sie sind der Schlüssel zur Schaffung einer großartigen Headless-Komponente
liegt darin, die Schnittstelle der Komponente so zu gestalten, dass ein Entwickler dies tun kann
ihre eigenen Stile klar und einfach anwenden.

Leiten Sie relevante Requisiten weiter

Im einfachsten Sinne ist eine Headless-Komponente einfach eine nicht gestylte Komponente.
Entwickler müssen in der Lage sein, ihr eigenes CSS auf die HTML-Elemente anzuwenden, die das
Komponente definiert.

Bei einfachen Komponenten kann dies einfach eine Frage der Weiterleitung des Klassennamens sein
prop zum Stammelement, damit Entwickler Klassenselektoren in ihrem
verwenden können CSS.

Wenn Ihre Komponente die gleiche Semantik wie ein natives HTML-Element hat, können Sie
verwenden den ComponentProps-Typ von React, um sicherzustellen, dass alle relevanten Requisiten vorhanden sind
weiterleitbar. Denken Sie daran, alle Requisiten wegzulassen, deren Benutzer Sie nicht haben möchten
Ihre Komponente, um sie überschreiben zu können.

import { type ComponentProps } from 'react'

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

Nach dem Login kopieren

Stellen Sie vordefinierte Klassen bereit

Bei Komponenten, die ein oder mehrere untergeordnete Elemente enthalten, werden Entwickler dies wahrscheinlich tun
jedes Element einzeln gestalten möchten.

Eine Strategie, dies zu unterstützen, besteht darin, sich darauf zu verlassen
CSS-Kombinatoren.
Beispielsweise könnte eine Headless-Galerie-Komponente wie folgt gestaltet sein:

/* Root container */
.gallery {
}

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

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

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

Nach dem Login kopieren

Aber dieser Ansatz stellt ein großes Problem dar, da jetzt die interne HTML-Struktur von
Die Komponente ist Teil ihrer öffentlichen API. Dies verhindert, dass Sie die
ändern Struktur später, ohne möglicherweise Downstream-Code zu beschädigen.

Eine bessere Strategie besteht darin, Klassen für jedes wichtige untergeordnete Element vorab zu definieren. Hier entlang
Entwickler können Klassenselektoren verwenden, ohne von einem bestimmten HTML abhängig zu sein
Struktur:

.xyz-gallery {
}

.xyz-gallery-next-button {
}

.xyz-gallery-previous-button {
}

.xyz-gallery-items-container {
}

.xyz-gallery-item {
}

Nach dem Login kopieren

Denken Sie daran, Ihren Klassen ein Präfix voranzustellen, damit sie nicht mit
kollidieren Eigene Stile des Entwicklers.

Unterstützen Sie benutzerdefinierte Layouts

Die Bereitstellung vordefinierter Klassen ist möglicherweise der schnellste Weg, Entwicklern dies zu ermöglichen
Gestalten Sie Ihre Komponente. Ein Nachteil dieses Ansatzes besteht jedoch darin, dass die
Die HTML-Struktur kann nicht angepasst werden.

Das spielt möglicherweise keine Rolle. Schließlich ist einfaches HTML in seiner Art bereits recht flexibel
gerendert werden kann. Allerdings greifen Entwickler manchmal nach zusätzlichem HTML, um
um bestimmte Designs zu verwirklichen. Wenn Sie den Quellcode für fast alle anzeigen
Auf der Website können Sie mit einer Vielzahl unsemantischer

-Elemente rechnen. Elemente,
deren einziger Zweck darin besteht, Flex- oder Rasterlayouts zu definieren und Kinder visuell zu gruppieren
Elemente innerhalb eines Rahmens oder erstellen Sie neue Stapelkontexte.

Sie können solche Anwendungsfälle unterstützen, indem Sie Ihre Headless-Komponente in
aufteilen mehrere verwandte Komponenten. Auf diese Weise können Entwickler ihre eigenen hinzufügen
Layoutelemente zur Komponente hinzufügen. Ein Entwickler könnte beispielsweise Next und
einbetten Vorherige Schaltflächen aus dem Galeriebeispiel in einem benutzerdefinierten Flexbox-Container:

<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>

Nach dem Login kopieren

.gallery-items-container {
}

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

Nach dem Login kopieren

Diese Art von Komponenten wird normalerweise mit
implementiert zu übergebender Kontext
Daten untereinander. Sie erfordern mehr Arbeit zum Entwerfen, Implementieren und
dokumentieren. Allerdings bedeutet die daraus resultierende Vielseitigkeit oft einen zusätzlichen Aufwand
es lohnt sich.

Erlauben Sie das Überschreiben von Komponenten

Einige wenige Anwendungsfälle erfordern, dass eine Headless-Komponente das Layout verwaltet
seiner untergeordneten Komponenten. Ein Beispiel könnte eine hierarchische Baumansicht sein, die
ermöglicht die Neuordnung der Artikel per Drag & Drop. Ein weiterer Anwendungsfall könnte sein:
Erlauben Sie Single-Page-Anwendungen, das Standardankerelement durch ein
zu ersetzen Benutzerdefinierte Linkkomponente, die das clientseitige Routing erleichtert.

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} />
  }}
/>

Nach dem Login kopieren

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} />
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.

Das obige ist der detaillierte Inhalt vonDadurch lassen sich kopflose Komponenten einfach stylen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!