Bevezetés

Az olyan frontend projektekben, amelyek ritkán igényelnek egyoldalas alkalmazást, a DOM-elemek soron belüli stílusai gyakran a célelem elemeibe kerülnek. >' attribútum.

De a React-ban a dolgok egészen másként működnek az inline stílust illetően. Ez az útmutató ennek elérésére összpontosít, a felhasználói profilkártya-összetevő létrehozásának valós példáján keresztül.

A React összetevőinek stílusa

Lehet, hogy már ismeri a React összetevők stílusának szokásos módját a classname attribútum használatával egy külső stíluslappal együtt:

 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

Soron belüli stílusok

Ha ugyanazt az eredményt érjük el a beágyazott stílusokkal, az egészen másként működik. A soron belüli stílusok használatához a Reactben használja a style attribútumot, amely elfogad egy teve tulajdonságokkal rendelkező JavaScript objektumot. Példa:

 function MyComponent(){ return Inline Styled Component } 

Vegye figyelembe, hogy a kitöltési értéknek nincs egysége, mert a React hozzáadja a 'px ' utótag néhány soron belüli numerikus stílustulajdonsághoz. Azokban az esetekben, amikor más mértékegységeket kell használnia, például 'em' vagy 'rem', kifejezetten adja meg az egységet az értékkel karakterláncként. Ha ezt a padding tulajdonságra alkalmazza, akkor a következőnek kell lennie: '1,5 em' .

Ezenkívül ezek a stílusok nincsenek automatikusan szállítói előtaggal, ezért manuálisan kell hozzáadnia a szállítói előtagokat.

Olvashatóság javítása

A MyComponent olvashatósága drámaian csökken, ha a stílusok túl sokak lesznek, és minden összeomlik. Az alábbiak szerint, mivel a stílusok csak objektumok, eltávolíthatók az összetevőből.

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

jsx

Kártyakomponens felépítése

Építsük meg a felhasználói kártya komponenst.

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

Ökölszabály

A hivatalos React-dokumentáció kifogásolja, hogy a szövegközi stílust használják a projektek stílusának elsődleges eszközeként, és a className attribútum használatát javasolja helyette.

Megjegyzés A dokumentációban néhány példa stílust használ az egyszerűség kedvéért, de általában nem javasolt a style attribútum használata a stíluselemek elsődleges eszközeként.

A legtöbb esetben, osztály név s-nek egy külső CSS-stíluslapon meghatározott osztályokra kell vonatkoznia. A stílusokat gyakran használják a React alkalmazásokban, hogy dinamikusan kiszámított stílusokat adjanak hozzá a megjelenítési időben.