Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Folosind React, este obișnuit să vă salvați stilurile într-un fișier CSS global. Acest lucru poate face dificilă localizarea stilului pentru anumite componente, mai ales atunci când lucrați la un proiect mare. Cu componentele cu stil, găsirea stilului pentru o anumită componentă este ușoară, deoarece acestea se află în același fișier cu componenta.

Să vedem cum să configurați și să integrați componente cu stil în aplicația dvs. React.

Instalarea bibliotecii de componente de stil

Puteți instala componente cu stil rulând această comandă în terminalul dvs.:

npm i-stilizat-componente

Pentru a instala componente stilizate folosind fire, rulați:

fire adăuga componente stilizate

Crearea unei componente cu stil

O componentă cu stil este la fel ca o componentă React standard, cu stiluri. Sunt diverse avantajele și dezavantajele componentelor stilizate, care sunt importante de luat în considerare pentru utilizarea corectă.

instagram viewer

Sintaxa generală arată astfel:

import stilizat din"componente-stilizate";

const ComponentName = stil. DOMElementTag`
 cssProperty: cssValue
`

Aici importi stilizat de la componentă stilizată bibliotecă. The stilizat funcția este o metodă internă care convertește codul JavaScript în CSS real. The ComponentName este numele componentei stilate. The DOMElementTag este elementul HTML/JSX pe care intenționați să îl stilați, cum ar fi div, span, buton etc.

Pentru a crea un buton cu stil folosind o componentă cu stil, mai întâi ați crea o componentă React care conține un element buton.

Ca astfel:

import Reacţiona din"reacţiona";
funcţieButon() {
întoarcere (

Acum puteți crea un stil pentru buton folosind componente-stil:

import stilizat din"componente-stilizate";
const StyledButton = stilat.button`
 umplutura: 1rem 0.8rem;
 raza de frontieră: 15px;
 culoare de fundal: gri;
 culoare: #FFFFFF;
 marimea fontului: 15px;
`

Punând totul împreună, va trebui să înlocuiți buton eticheta cu StyledButton componenta:

import stilizat din"componente-stilizate";
import Reacţiona din"reacţiona";
const StyledButton = stilat.button`
 umplutura: 1rem 0.8rem;
 raza de frontieră: 15px;
 culoare de fundal: gri;
 culoare: #FFFFFF;
 marimea fontului: 15px;
`
funcţieButon() {
întoarcere (
Bun venit!!!</StyledButton>
 )
}

Stiluri de cuibărire

De asemenea, puteți imbrica stiluri atunci când lucrați cu componente cu stil. Îmbunătățirea componentelor stilate este un pic ca folosind limbajul de extensie SASS/SCSS. Puteți imbrica stiluri dacă o componentă conține mai multe etichete de elemente și dorește să stileze fiecare etichetă individual.

De exemplu:

import Reacţiona din'reacţiona';
funcţieApp() {
întoarcere (


Componente stilate</h1>




Bun venit la styled-components</p>
 </div>
 )
}

Acest cod creează o componentă care conține un h1 element și a p element.

Puteți stila aceste elemente utilizând caracteristica de stilizare imbricată a componentelor stilate:

import Reacţiona din'reacţiona';
import stilizat din„componente-stilizate”;
const StyledApp = styled.div`
 culoare: #333333;
 text-align: centru;


 h1 {
 marimea fontului: 32px;
 font-style: italic;
 greutate font: bold;
 spațiul dintre litere: 1.2rem;
 text-transform: majuscule; 
 }


 p {
 margin-block-start: 1rem;
 marimea fontului: 18px;
 }
`
funcţieApp() {
întoarcere (

Componente stilate</h1>




Bun venit la styled-components</p>
 </StyledApp>
 )
}

Acest cod folosește o componentă cu stil și cuib stilul pentru h1 și p Etichete.

Crearea și utilizarea variabilelor

Abilitatea de a crea variabile este o caracteristică remarcabilă a bibliotecii de componente cu stil. Această abilitate oferă stiluri dinamice în care puteți utiliza variabile JavaScript pentru a determina stiluri.

Pentru a utiliza variabile în componentele cu stil, creați o variabilă și atribuiți-i o valoare de proprietate CSS. Apoi puteți utiliza acea variabilă direct în CSS, de exemplu:

import stilizat din"componente-stilizate";
const MainColor = "roșu";


const Titlu = stilat.h1`
 culoare: ${MainColor};
`;
funcţieApp() {
întoarcere (
 <>
Bună lume!</Heading>
 </>
 );
}

În blocul de cod de mai sus, textul „Salut Lume!” se va afișa în culoarea roșie.

Rețineți că acest exemplu folosește pur și simplu o variabilă JavaScript standard într-un literal șablon împreună cu componenta cu stil. Este o abordare diferită de folosind variabile CSS.

Stiluri de extindere

După ce creați o componentă cu stil, veți utiliza componenta. Poate doriți să faceți diferențe subtile sau să adăugați mai mult stil în anumite situații. În astfel de cazuri, puteți extinde stilurile.

Pentru a extinde stilurile, înfășurați componenta stilată în stilat() constructor și apoi include orice stiluri suplimentare.

În acest exemplu, PrimaryButton componenta moștenește stilul componentei Buton și adaugă o culoare de fundal diferită de albastru.

import stilizat din"componente-stilizate";
import Reacţiona din"reacţiona";
const Button = stilat.button`
 umplutura: 1rem 0.8rem;
 raza de frontieră: 15px;
 culoare de fundal: gri;
 culoare: #FFFFFF;
 marimea fontului: 15px;
`


const PrimaryButton = stilat (Buton)`
 culoare de fundal: albastru;
`
funcţieApp() {
întoarcere (

De asemenea, puteți schimba eticheta pe care o redă o componentă stilată folosind la fel de o recuzită.

The la fel de prop vă permite să specificați elementul HTML/JSX subiacent pe care îl va reda componenta cu stil.

De exemplu:

import stilizat din"componente-stilizate";
import Reacţiona din"reacţiona";
const Button = stilat.button`
 umplutura: 1rem 0.8rem;
 raza de frontieră: 15px;
 culoare de fundal: gri;
 culoare: #FFFFFF;
 marimea fontului: 15px;
`
funcţieApp() {
întoarcere (

Acest cod redă Buton componentă ca an A element, stabilindu-i href atribuit lui '#'.

Crearea de stiluri globale

Componentele stilate sunt de obicei vizate de o componentă, așa că s-ar putea să vă întrebați cum să stilați aplicația ca întreg. Puteți stila aplicația folosind stilul global.

Styled-Components oferă a createGlobalStyle funcție care vă permite să declarați stiluri la nivel global. The createGlobalStyle elimină constrângerea stilului în funcție de componentă și vă permite să declarați stiluri care se aplică fiecărei componente.

Pentru a crea stiluri globale, importați createGlobalStyle funcţionează şi declara stilurile de care ai nevoie.

De exemplu:

import {createGlobalStyle} din„componente-stilizate”;
const GlobalStyles = createGlobalStyle`
 @import url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


 * {
 marja: 0;
 umplutura: 0;
 dimensionare cutie: chenar-cutie;
 }


 corp {
 culoare de fundal: #343434;
 marimea fontului: 15px;
 culoare: #FFFFFF;
 familie de fonturi: "Montserrat", sans-serif; 
 }
`
exportMod implicit GlobalStyles;

Apoi importați GlobalStyles componentă în componenta aplicației și redați-o. Redarea GlobalStyles componenta din componenta aplicației dvs. va aplica stilurile aplicației dvs.

Ca astfel:

import Reacţiona din'reacţiona';
import GlobalStyles din'./Global';
funcţieApp() {
întoarcere (



 </div>
 )
}

Mai multe despre Componentele cu stil

Ați învățat cum să configurați, să instalați și să utilizați componente cu stil în aplicația dvs. React. Biblioteca de componente cu stil este o modalitate eficientă de a vă stiliza aplicația React. Oferă multe caracteristici utile care permit flexibilitate în stil și stil dinamic.

Există multe mai multe componente cu stil, cum ar fi animațiile, iar React este un cadru mare, cu multe de învățat în afară de asta.