En hurtig guide til stylede komponenter med interaktive eksempler

”Det er interessant…” tænkte jeg, da jeg først læste om stylede komponenter. Og så gik jeg tilbage til mine testede React-komponenter.

Men så viste Max Stoiber, medskaberen af ​​stylede komponenter, os sit nye bibliotek på React in Flip Flops, der koder for bootcamp. "Det er interessant" forvandlede til "Det er blæst!"

Jeg kunne næppe indeholde min spænding. Endelig forstod jeg konceptet bag stylede komponenter. Det åbnede så mange nye muligheder for, hvordan man kan style komponenter. Det forenklet måde at strukturere webapplikationer på. Og det håndhævede konsistensen i stylingen af ​​React-apps.

Det hele startede med mærkede skabelonlitterære

Du kan måske tro, at jeg er en smule gammel skole, men jeg tror, ​​at hvis du virkelig vil forstå nogen idé, skal du vikle dit hoved omkring de underliggende begreber. Vi kunne dykke direkte i stylede komponenter. Men først skal vi finde ud af, hvad der vakte Max og Glen's nysgerrighed, før de startede projektet og faktisk byggede stylede komponenter.

ES6s skabelonlitterære forenkler måden, hvordan du kan blande variabler og tekst. Hvis du tager to variabler: navn og stemning, med tildelte værdier af henholdsvis "Alice" og "glad", er skabelonen bogstavelig:

const sætning = `$ {navn} er $ {stemning}. ';

vil producere en sætning: "Alice er glad."

Mærkede skabelonlitterære tager syntaks et skridt videre.

Mærker er JavaScript-funktioner. Men der er to væsentlige forskelle i sammenligning med almindelige funktioner:

  • tagfunktioner kaldes ved hjælp af backticks-notation i stedet for parenteser. I eksemplet herunder kalder vi hilsenTag-funktionen ved at indpakke argumenterne i backticks:
greetingTag` $ {name} er $ {humør}. ';
  • JavaScript behandler skabelonens bogstavelige - alt mellem backticks - som funktionsargumenter. I det første trin transformerer JavaScript skabelonens bogstavelige til en række strenge. Strengene følges af ekstraherede variabler. Hvis vi tager eksemplet ovenfor, vil de transformerede argumenter, der er sendt til greetingTagfunction, se ud som følger:
["", "er", "."], navn, humør

Det første argument, en matrix, indeholder alle strenge, som vi har placeret før, mellem og efter navnet og stemningsvariablerne. I vores eksempel er den første streng tom, fordi der ikke er noget før navnet. De næste to argumenter, navn og stemning, blev uddraget fra den skabelon bogstavelige som variabler.

Nu kan greetingTag-funktionen anvende enhver logik på tekstenes array og navn og humørvariabler og returnere det ønskede resultat.

Lad os oprette en tagfunktion, the greetingTag, der tager tre argumenter: en tekstgruppe, et navn og en stemningsvariabel. Og her er den logik, den vil bruge: hvis værdien af ​​humør er "glad", vil den returnere en regelmæssig hilsen sætning. I alle andre tilfælde returnerer den cheer-up-versionen af ​​hilsenen:

const greetingTag = (tekster, navn, stemning) => {
  if (humør === 'glad') {
    returner 'Hej $ {name}!';
  } andet {
    returner 'Hej $ {name}, du er fantastisk!';
  }
}
const greeting = greetingTag` $ {name} er $ {mood}. ';

Nu, hvis vi tildelte "Alice" til navnet og "glad" til stemningen, ville greetingTag-funktionen vende tilbage: "Hej Alice!". Hvis vi ændrede stemningens værdi til noget andet ord end "glad" - siger "ophidset" eller "kat" - ville hilsenTag vende tilbage: "Hej Alice, du er fantastisk!".

Men hvordan kan du bruge denne viden til at style React-komponenter?

Stylede komponenter

Dette nøjagtige spørgsmål forundrede Max og Glenn, mens de ledte efter en bedre og mere konsekvent måde at style React-komponenter på. Aha! øjeblikket kom, da de indså, at mærkede skabelonlitterære ikke kun accepterer variabler, men også funktioner. Som i eksemplet nedenfor:

const greeting = greetingTag` $ {name => `Hej $ {name}!`} `;

Her modtager hilsenTag en skabelon bogstavelig med en funktion. Når funktionen er udført af greetingTag, kan greetingTag anvende yderligere logik på den returnerede værdi og returnere et resultat.

Stylede komponenter er også tagfunktioner. Men i stedet for at acceptere hilsen mønstre, accepterer de skabelon bogstaver, der indeholder CSS-stilarter. Og i stedet for hilsningssætninger returnerer de React-komponenter.

Lad mig vise dig, hvordan det fungerer.

Side note: Kodeeksemplerne nedenfor er interaktive. Du kan lege med dem, tilføje stilarter og ændre tildelte værdier. Du kan inspicere forskellige filer ved at klikke på deres faner. Eller tryk på den orange, blå-orange eller blå knap øverst for at skifte mellem forskellige visninger.

Hvis du vil bruge stylede komponenter i din applikation, skal du først installere stylede komponenter:

npm installation - gemme stylede komponenter

Nedenfor oprettede jeg en stylet komponenttitel:

Styled.h1 er en tagfunktion. Det returnerer en React-komponent, der er identisk med den nedenfor:

import React fra 'react';
const title = ({børn}) => 

{børn}

Det fine med denne løsning er, at stylede komponenter gør det tunge løft for dig - din komponenttitel får farven på kongeblå.

Jeg ved, hvad du tænker: hvis vi skulle skrive stilarter for hver enkelt komponent på denne måde, ville det ikke være meget forskelligt fra at skrive CSS-klasser. Heldigvis er stylede komponenter meget smartere!

Forestil dig, at du gerne vil have dine overskrifter sorte mesteparten af ​​tiden og kun sporadisk fremhæve dem ved hjælp af en anden farve. Med stylede komponenter kan vi oprette et farvebevidst titel, der som standard er sort og skifte til royalblue, hver gang vi sender det som en primær prop:

Du kan videresende rekvisitter til titlen som til enhver anden React-komponent. Her modtager den anden titel den primære prop. Vi kan få adgang til rekvisitterne i en stylet komponenterklæring. Det åbner en helt ny verden af ​​muligheder.

Ovenfor definerede jeg den stylede komponenttitel. Da rekvisitterne er tilgængelige inde i den stylede komponenterklæring, kan vi beslutte, hvilken farve vores komponent vil være. Funktionen bruger den ternære operatør og returnerer royalblue, når den primære egenskab er sand og ellers sort.

Du behøver ikke at skrive det eksplicit som i:

 Hej Bob, du er fantastisk! 

At videregive den primære rekvisit uden en opgave er som bestået
primære = {true}.

Da døren nu er åben, skal vi gøre vores titel mere universel. Nogle gange har du muligvis brug for din titel for at bruge mindre skrifttyper og nogle gange større. Nogle gange vil du måske have, at den skal have en normal vægt, og nogle gange kan du måske ønsker, at den skiller sig ud og giver den en fed skriftvægt. Og nogle gange kan du ønske at aktivere eller bogstaver titlen.

Stylede komponenter giver dig mulighed for at oprette en enkelt universel komponent. Derefter kan du bruge det overalt uden at tænke på stilarter længere:

I eksemplet ovenfor tildeles fontstørrelsen eksplicitte værdier: 48px eller 32px. En sådan kode er svært at vedligeholde, når kodebasen vokser.

Temaer

Når du opretter et sæt stylede komponenter til senere brug, vil du håndhæve ensartet styling på tværs af applikationen. Det er altid værd at indstille stylingsreglerne. Fortrinsvis i en separat fil. Senere, når du er nødt til at ændre stilarter, i stedet for at besøge alle dine komponenter igen, kan du ændre styling på ét sted.

Stylede komponenter giver dig et værktøj til at gøre nøjagtigt det - temaer.

Et tema er et JavaScript-objekt, hvor du kan definere stylingparametre:

const tema = {
  farver: {
    primær: "royalblue",
    sekundær: "teal",
    tekst: "sort"
  },
  skriftstørrelse: {
    xl: "2.4rem",
    lg: "1,8rem",
    md: "1.3rem",
    nm: "1rem",
    sm: "0,75rem"
  }
}

Temaet ovenfor definerer farver og fontSize-egenskaber. Du vil være i stand til at få adgang til dem i alle stylede komponenter på tværs af applikationen.

Men først skal du gøre applikationen opmærksom på temaet. Du skal videregive det som en rekvisita til ThemeProvider - en indpakningskomponent leveret af stylede komponenter:

import {ThemeProvider} fra "stylede komponenter";
importtema fra "./theme.js";
const App = () => (
  
    
       Hej Alice!         )

Lad os tage det forrige eksempel for at lære, hvordan man bruger et tema, og hvordan man får adgang til dets egenskaber i stylede komponenter.

I titlen kan du få adgang til temaobjektet via props.theme. For at vælge titelens farve, kontrollerer du først, om en given attribut er blevet sendt til titlen (primær eller sekundær). Returner derefter den tilsvarende farveværdi, der er angivet i temaet. Hvis der ikke er vedtaget nogen, returnerer du en standard tekstfarve.

Titlen kan nu også beslutte om dets fontstørrelser. Den kontrollerer først, om en xl-, lg-, md- eller sm-prop er bestået, og - baseret på det - tildeler egnet værdi til fontstørrelsesegenskabet. Hvis der ikke er bestået nogen rekvisitter, tildeler den værdien af ​​fontSize.nm defineret i temaet.

Vi har netop oprettet en fleksibel titelkomponent. Nu kan du bruge det uden at skulle bekymre dig om CSS. Du kan udelukkende beslutte om dens look ved at videregive et specifikt sæt rekvisitter.

Udvidelse af stylede komponenter

Oprettelse af kun en titelkomponent er ikke nok. For eksempel på en blogside har du brug for et h1-tag til en posttitel og et h2-tag til undertekster. Du har også brug for afsnit for at få vist tekst.

Stylede komponenter kan let udvides. Du kan oprette en ny undertekstkomponent med et h2-tag og kopiere og indsætte alle stylingsreglerne fra titlen. Eller du kan udvide titelkomponenten med metComponenthelper-metoden. Underteksten har alle egenskaberne ved en titel, men bruger et h2-tag:

const Subtitle = Titel.withComponent ("h2");

Du kan udvide titlen til at oprette tekstkomponenten med et p-tag og på samme tid - fikse dens farve som en tema.text og indstille linjehøjden til 1,65? Også her skinner stylede komponenter:

const Paragraph = Title.withComponent ("p");
const Tekst = Afsnit.extend`
  farve: $ {props => props.theme.colors.text};
  linjehøjde: 1,65;

Først oprettede vi en mellemprodukt-komponent, der har alle stylingsreglerne i titlen. Vi bruger dog p-mærket og derefter Tekstkomponenten, der udvider afsnittet og indstiller dets farve og linjehøjdeegenskaber. Nedenfor kan du inspicere koden for komponenterne til titel, undertekst og tekst:

Stylede komponenter giver dig mulighed for at skrive en almindelig CSS i JavaScript. Derudover kan du indlejre CSS-stilarter og pseudoklasser. Du kan tilføje medieforespørgsler og attributter. Endelig ved hjælp af injectGlobal hjælper-metoden kan du injicere globale stylingsregler og importere skrifttyper.

Pseudo-klasser

For at lære at bruge pseudoklasser, lad os oprette en knapkomponent, der ændrer farven, når vi holder musen hen over den.

Ovenfor indlejrede jeg pseudoklassen &:, for at ændre farven, hver gang du holder musen hen over knappen. Du kan bruge enhver pseudoklasse, der er tilgængelig i CSS på samme måde.

Injektion af globale stilarter med stylede komponenter

I stedet for at importere filen med globale stilarter, kan du bruge injectGlobal-hjælperen til at tilføje globale stilarter til din applikation. Først skal du importere injectGlobal-hjælperen:

import stylet, {ThemeProvider, injectGlobal} fra "stylede komponenter";

I eksemplet nedenfor bruger jeg injectGlobal til:

  • importerer skrifttyper og indstil fontfamilien for alle elementer til “Montserrat”.
  • nulstille margener, polstringer og grænser.
  • ændre rodelementets fontstørrelse ved hjælp af medieforespørgslen til skærmstørrelse, der er lavere end screen.medium og screen.mobile. Begge er defineret i temaet.

Stil med komponenttemaer håndhæver konsistensen. For at lære mere kan du udforske en af ​​de bedste dokumenter, jeg nogensinde har set: Stylede komponenter Dokumenter.

Takket være Max og Glen's nysgerrighed tilbyder stylede komponenter dig et fantastisk sæt værktøjer til stilart React-applikationer. Det økosystem med stilartede komponenter blomstrer. Besøg siden Økosystem for at udforske de brugsklare komponenter og gittersystemer. Undersøg de mange andre værktøjer, der er bygget med stylede komponenter.

Konklusion

I denne tutorial har du lært, hvordan de mærkede skabelonlitterære fungerer. Du har også lært, hvordan du bruger stylede komponenter til at opbygge universal React-komponenter. Du forstår nu, hvordan du bruger et tema til at implementere de konsistente stilarter i din næste applikation.

Stylede komponenter er en ny måde at style React-applikationer på. Ud af kassen, stylede komponenter:

  • lad dig bygge genanvendelige og universelle komponenter
  • håndhæve konsistensen af ​​styling
  • giver dig mulighed for at indlejre stilarter
  • tilføj leverandørpræfikser, når det er nødvendigt
  • er simpelthen fantastisk!

Hvis du kunne lide denne artikel, endda 50 gange - ville jeg virkelig sætte pris på den, og den gør en enorm forskel for mig.

Jeg har for nylig offentliggjort en gratis React-tutorial til begyndere. Hvis du vil lære at oprette en webapplikation fra bunden af, er det et godt udgangspunkt. Du lærer, hvordan du bygger en app, der hjælper dig med at finde den bedste film at se Sweet Pumpkins