logo

TechCodeview

Inline styl v Reactu

Úvod

V projektech frontend, které jen zřídka vyžadují jednostránkovou aplikaci, jsou vložené styly prvků DOM často umístěny v cílovém prvku. >' atribut.

Ale v Reactu jsou věci ohledně inline stylingu docela jiné. Tato příručka se zaměřuje na dosažení tohoto cíle pomocí reálného příkladu vytvoření komponenty Karta uživatelského profilu.

Stylingové komponenty v Reactu

Možná už víte o běžném způsobu stylování komponent React pomocí atributu classname ve spojení s externí šablonou stylů:

 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

Inline styly

Dosažení stejného výsledku s vloženými styly funguje zcela odlišně. Chcete-li použít vložené styly v Reactu, použijte atribut style, který přijímá objekt JavaScriptu s vlastnostmi velblouda. Příklad:

 function MyComponent(){ return Inline Styled Component }

Všimněte si, že hodnota výplně nemá jednotku, protože React přidává a 'px Přípona ' k některým vlastnostem numerického inline stylu. V případech, kdy potřebujete použít jiné jednotky, jako je 'em' nebo 'rem', explicitně zadejte jednotku s hodnotou jako řetězec. Toto použití na vlastnost padding by mělo být padding: '1,5 em' .

Tyto styly také nemají automaticky předponu dodavatele, takže předpony dodavatele musíte přidat ručně.

Zlepšete čitelnost

Čitelnost MyComponent dramaticky klesá, pokud je stylů příliš mnoho a vše je neohrabané. Jak je ukázáno níže, protože styly jsou pouze objekty, lze je z komponenty odstranit.

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

jsx

Sestavení kartové komponenty

Pojďme sestavit komponentu uživatelské 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 palce

Oficiální dokumentace Reactu štěká na použití inline stylingu jako primárního prostředku pro stylování projektů a doporučuje místo toho použít atribut className.

Poznámka Některé příklady v dokumentaci používají styl pro pohodlí, ale obecně se nedoporučuje používat atribut style jako primární prostředek pro úpravu prvků.

Většinou, jméno třídy s by měly odkazovat na třídy definované v externí šabloně stylů CSS. Styly se často používají v aplikacích React k přidání dynamicky vypočítaných stylů v době vykreslování.