logo

TechCodeview

Stil inline în React

Introducere

În proiectele frontend care rareori necesită o aplicație cu o singură pagină, stilurile inline ale elementelor DOM sunt adesea plasate în elementul țintă. >' atribut.

Dar în React, lucrurile stau destul de diferit în ceea ce privește stilul inline. Acest ghid se concentrează pe realizarea acestui lucru folosind un exemplu real de creare a unei componente Card de profil utilizator.

Componente de styling în React

Este posibil să fiți deja conștienți de modul obișnuit de a stila componentele React folosind atributul classname împreună cu o foaie de stil externă:

 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

Stiluri în linie

Obținerea aceluiași rezultat cu stilurile inline funcționează destul de diferit. Pentru a utiliza stiluri inline în React, utilizați atributul style, care acceptă un obiect JavaScript cu proprietăți camel. Exemplu:

 function MyComponent(){ return Inline Styled Component }

Rețineți că valoarea de umplutură nu are o unitate deoarece React adaugă a „px ' sufix la unele proprietăți numerice de stil inline. În cazurile în care trebuie să utilizați alte unități, cum ar fi „em” sau „rem”, specificați în mod explicit unitatea cu valoarea ca șir. Aplicarea acestui lucru la proprietatea padding ar trebui să fie padding: „1.5em” .

De asemenea, aceste stiluri nu sunt automat prefixate de furnizor, așa că trebuie să adăugați manual prefixele de furnizor.

Îmbunătățiți lizibilitatea

Lizibilitatea MyComponent scade dramatic dacă stilurile devin prea multe și totul devine neplăcut. După cum se arată mai jos, deoarece stilurile sunt doar obiecte, ele pot fi eliminate din componentă.

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

jsx

Construirea unei componente de card

Să construim componenta cardului de utilizator.

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

Regula generală

Documentația oficială React insistă la utilizarea stilului inline ca mijloc principal de stilare a proiectelor și recomandă utilizarea atributului className.

Notă Unele exemple din documentație folosesc un stil pentru comoditate, dar în general nu este recomandat să folosiți atributul stil ca mijloc principal de stilare a elementelor.

În cele mai multe cazuri, numele clasei s ar trebui să se refere la clase definite într-o foaie de stil CSS externă. Stilurile sunt adesea folosite în aplicațiile React pentru a adăuga stiluri calculate dinamic în timpul redării.