Cum să stilați componentele React cu CSS

Vă puteți stila aplicațiile și paginile React folosind o serie de tehnici. Cel mai simplu ar fi să descărcați o bibliotecă de componente React. Cu toate acestea, chiar și atunci când utilizați biblioteci, mai devreme sau mai târziu va trebui să adăugați stiluri personalizate. Deci, care este cel mai bun mod de a face asta?

Pentru proiecte la scară mică, vă puteți stila confortabil aplicația folosind stiluri în linie , module sau scriind singur specificațiile className . Iar pentru proiecte dinamice – cum ar fi aplicațiile – este mai bine să folosiți o bibliotecă care vă permite să implementați cu ușurință elementele de recuzită.

Alternativ, puteți utiliza un kit de utilitate precum Tailwind UI, care vine cu stiluri pre-construite. Dacă aveți nevoie să redați o machetă sau o prezentare, kiturile de interfață de utilizare prietenoase cu React sunt calea de urmat.

Stil practic cu className

În React, stilurile practice CSS sunt aplicate prin proprietatea className .

Acesta este, de asemenea, echivalentul utilizării unei foi de stil pentru proiectul dvs. Deoarece React este condus de structura componentelor, puteți importa foile de stil numai pentru nevoi specifice.

Să ne uităm la un exemplu.

App.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

App.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

Și acesta ar fi rezultatul:

Este o tehnică de vanilie complet valabilă. Și este cel mai adesea folosit pentru a declara variabile globale pe care le veți reutiliza în componentele de bază.

Singura avertizare este că, pe măsură ce proiectul tău crește, crește și potențialul conflictelor de denumire.

De asemenea, costul de eficiență al gestionării a sute de foi de stil este absurd de mare.

Utilizarea JSX pentru stiluri inline

React vă permite să stilați elementele DOM folosind stiluri inline. În timp ce logica CSS rămâne aceeași, stilul în sine trebuie să treacă prin JavaScript. Acesta este, de asemenea, cunoscut sub numele de JSX.

Să ne uităm la un exemplu:

Headline.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

Un lucru pe care îl veți observa este că, în loc să scriem line-height , folosim lineHeight .

Explicația pentru aceasta este că, „Deoarece JSX este mai aproape de JavaScript decât de HTML, React DOM utilizează convenția de denumire a proprietăților camelCase în loc de numele atributelor HTML”. .

Stilurile în linie sunt de obicei folosite pentru a prezenta exemple, dar și pentru a adăuga stil dinamic unor elemente specifice. Mai mult, stilurile inline nu acceptă pseudo-elemente sau interogări media, deoarece puteți trece doar stilul . Utilizarea unei foi de stil este o alternativă mai bună.

Crearea domeniului local cu module CSS

Dacă doriți să aplicați stiluri personalizate componentelor fără coliziuni de denumire, o modalitate de a face acest lucru este prin modulele CSS.

Aceasta este o abordare în care puteți aplica domeniul de aplicare local fiecărei componente în mod individual.

Ca astfel:

Header.module.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

Header.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

De asemenea, puteți face lucruri precum compoziție , în care apelați un anumit stil dintr-o altă foaie de stil - evitând nevoia de a rescrie aceeași logică de două ori.

 .header { composes: header from './style.css'; }

CSS în JS

Spre deosebire de cadre precum Vue și Svelte, React nu oferă propria interfață de stil.

Deci, deși puteți scrie CSS pentru componente folosind metodele menționate mai sus, abordarea Sfântului Graal este să utilizați CSS în bibliotecile JS. Fiecare bibliotecă are punctele sale forte și punctele sale slabe, dar, în general, beneficiile rămân aceleași:

• Recuzită pentru diferite variații de stil.
• Tematică accesibilă.
• Definirea stilului bazat pe componente.
• Variabile CSS dinamice folosind funcții JavaScript.

Cea mai populară soluție pentru CSS în JS este Componentele stilate.

Și alte opțiuni notabile includ Emotion și Linaria. De dragul demonstrației, să ne uităm la modul în care CSS este integrat într-o componentă React folosind biblioteca Styled Components.

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

Mai întâi, creăm o nouă componentă numită HeaderWrapper care va reda un container <section> pentru titlul antetului nostru. Apoi creăm o altă componentă numită HeaderTitle și îi transmitem variabilele CSS. Deci, într-un fel, acest lucru este exact la fel cu lucrul cu componente web, doar în contextul React.

Folosind un cadru CSS

Nu este că totul în front-end se îndreaptă către cadre și biblioteci.

Are mai mult de-a face cu faptul că a începe un proiect din nimic este ineficient. Un cadru precum Tailwind CSS ajută la atenuarea nevoii de a scrie toate structurile aplicației de la zero. Modul în care funcționează Tailwind CSS este că cadrul oferă clase de utilitate care sunt predeterminate, permițându-vă să structurați un aspect fără a fi nevoie să scrieți CSS independent.

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

Deci, în loc să definim stilul componentei folosind Constants , putem scrie direct stilul așa cum este specificat de cadru. O metodă ca aceasta este extrem de eficientă și puteți, de exemplu, să importați componente UI (cum ar fi cardurile) făcute de alții.

Tailwind CSS este deosebit de popular deoarece puteți copia și lipi direct fragmente și le puteți utiliza în designul aplicației dvs. fără consecințe.

Utilizarea unei biblioteci UI

Ultima metodă de stilare a componentelor React este utilizarea unei biblioteci UI. Spre deosebire de un cadru, o bibliotecă UI urmează liniile directoare de stil. Deci, în multe feluri, vine cu un stil care este deja predeterminat. Asemenea Mantine și Material UI sunt câteva dintre alegerile preferate.

Singurul „dezavantaj” este că trebuie să-ți petreci destul de mult timp învățând acea anumită bibliotecă. Dar același lucru s-ar putea spune și despre cadre. În ciuda barierei de intrare, atât cadrele CSS, cât și bibliotecile UI sunt standardul de aur în stilarea componentelor React.