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 'react' import './style.css' 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: 'flex', height: 100, width: 400, boxShadow: '0 0 3px 2px #cec7c759', alignItems: 'center', padding: 20, borderRadius: 20, }, profilePicture: { display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'orange', color: 'white', height: 20, width: 20, borderRadius: '50%', padding: 10, fontWeight: 'bold', }, bio: { marginLeft: 10, }, userName: { fontWeight: 'bold', }, }; 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.