logo

TechCodeview

Inline Style u Reactu

Uvod

U projektima sučelja koji rijetko zahtijevaju aplikaciju na jednoj stranici, ugrađeni stilovi DOM elemenata često se postavljaju u ciljni element >' atribut.

Ali u Reactu su stvari sasvim drugačije u vezi stiliziranja inline. Ovaj se vodič usredotočuje na postizanje toga korištenjem primjera iz stvarnog svijeta izrade komponente kartice korisničkog profila.

Komponente stiliziranja u Reactu

Možda ste već svjesni uobičajenog načina stiliziranja komponenti Reacta pomoću atributa imena klase u kombinaciji s vanjskom tablicom stilova:

 import React from &apos;react&apos; import &apos;./style.css&apos; function myComponent(){ return( return <p classname="paragraph-text">ClassName Styled Text</p> ) }

jsx 

 paragraph-text{ font-weight: bold; color: beige; }

CSS

Umetnuti stilovi

Dobivanje istog rezultata s ugrađenim stilovima funkcionira sasvim drugačije. Da biste koristili ugrađene stilove u Reactu, upotrijebite atribut style, koji prihvaća JavaScript objekt sa svojstvima deve. Primjer:

 function MyComponent(){ return Inline Styled Component }

Imajte na umu da padding vrijednost nema jedinicu jer React dodaje a 'px ' sufiks nekim svojstvima numeričkog stila u retku. U slučajevima kada trebate koristiti druge jedinice, kao što su 'em' ili 'rem', eksplicitno navedite jedinicu s vrijednošću kao niz. Primjena ovoga na svojstvo padding bi trebala biti padding: '1,5em' .

Također, ovi stilovi nemaju automatski prefiks dobavljača, tako da prefikse dobavljača morate dodati ručno.

Poboljšajte čitljivost

Čitljivost MyComponent dramatično pada ako stilova postane previše i sve postane nezgrapno. Kao što je prikazano u nastavku, budući da su stilovi samo objekti, mogu se ukloniti iz komponente.

 const myComponentStyle = { color: &apos;blue&apos;, lineHeight: 10, padding: &apos;1.5em&apos;, } function MyComponent(){ return Inline Styled Component }

jsx

Izrada komponente kartice

Izgradimo komponentu korisničke kartice.

 const cardStyles = { container: { display: &apos;flex&apos;, height: 100, width: 400, boxShadow: &apos;0 0 3px 2px #cec7c759&apos;, alignItems: &apos;center&apos;, padding: 20, borderRadius: 20, }, profilePicture: { display: &apos;flex&apos;, justifyContent: &apos;center&apos;, alignItems: &apos;center&apos;, backgroundColor: &apos;orange&apos;, color: &apos;white&apos;, height: 20, width: 20, borderRadius: &apos;50%&apos;, padding: 10, fontWeight: &apos;bold&apos;, }, bio: { marginLeft: 10, }, userName: { fontWeight: &apos;bold&apos;, }, }; function userCardComponent(){ <span style="{cardStyles.profilePicture}">D</span> <p style="{cardStyles.userName}">Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> }

Praktično pravilo

Službena dokumentacija Reacta laje na korištenje ugrađenog stiliziranja kao primarnog sredstva stiliziranja projekata i umjesto toga preporučuje korištenje atributa className.

Napomena Neki primjeri u dokumentaciji koriste stil radi praktičnosti, ali općenito se ne preporučuje korištenje atributa stila kao primarnog sredstva stiliziranja elemenata.

U većini slučajeva, naziv klase s bi se trebao odnositi na klase definirane u vanjskoj tablici stilova CSS-a. Stilovi se često koriste u React aplikacijama za dodavanje dinamički izračunatih stilova tijekom renderiranja.