logo

TechCodeview

Inline Style v React

Úvod

Vo frontendových projektoch, ktoré zriedka vyžadujú jednostránkovú aplikáciu, sú vložené štýly prvkov DOM často umiestnené v cieľovom prvku. >' atribút.

Ale v Reacte sú veci celkom iné, pokiaľ ide o styling inline. Táto príručka sa zameriava na dosiahnutie tohto cieľa pomocou skutočného príkladu vytvorenia komponentu Karta profilu používateľa.

Stylingové komponenty v React

Možno už viete o bežnom spôsobe štýlovania komponentov React pomocou atribútu classname v spojení s externým štýlom:

 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

Vložené štýly

Dosiahnutie rovnakého výsledku s vloženými štýlmi funguje úplne inak. Ak chcete použiť vložené štýly v React, použite atribút štýlu, ktorý akceptuje objekt JavaScript s vlastnosťami ťavy. Príklad:

 function MyComponent(){ return Inline Styled Component }

Všimnite si, že hodnota výplne nemá jednotku, pretože React pridáva a 'px Prípona ' k niektorým vlastnostiam číselného štýlu vloženého textu. V prípadoch, keď potrebujete použiť iné jednotky, ako napríklad „em“ alebo „rem“, jednoznačne uveďte jednotku s hodnotou ako reťazec. Ak to použijete na vlastnosť čalúnenia, malo by to byť čalúnenie: '1,5 em' .

Tieto štýly tiež nemajú automaticky predponu dodávateľa, takže predpony dodávateľa musíte pridať ručne.

Zlepšite čitateľnosť

Čitateľnosť MyComponent dramaticky klesá, ak je štýlov príliš veľa a všetko je neohrabané. Ako je uvedené nižšie, keďže štýly sú len objekty, možno ich z komponentu odstrániť.

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

jsx

Zostavenie kartového komponentu

Poďme zostaviť komponent používateľskej karty.

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

Pravidlo palca

Oficiálna dokumentácia Reactu šteká na používanie vloženého štýlu ako primárneho prostriedku na úpravu projektov a odporúča namiesto toho použiť atribút className.

Poznámka Niektoré príklady v dokumentácii používajú štýl pre pohodlie, ale vo všeobecnosti sa neodporúča používať atribút štýlu ako primárny prostriedok na úpravu prvkov.

Väčšinou, názov triedy s by mali odkazovať na triedy definované v externom šablóne so štýlmi CSS. Štýly sa často používajú v aplikáciách React na pridávanie dynamicky vypočítaných štýlov v čase vykresľovania.