Koristeći React, uobičajeno je spremiti svoje stilove u globalnu CSS datoteku. To može otežati lociranje stila za određene komponente, osobito kada radite na velikom projektu. Uz stilizirane komponente, pronalaženje stila za određenu komponentu je jednostavno jer se nalaze u istoj datoteci kao i komponenta.

Pogledajmo kako postaviti i integrirati stilizirane komponente u vašu React aplikaciju.

Instaliranje biblioteke stiliziranih komponenti

Možete instalirati styled-components pokretanjem ove naredbe na vašem terminalu:

npm i styled-components

Da biste instalirali stilizirane komponente pomoću pređe, pokrenite:

pređa dodati stilizirane komponente

Stvaranje stilizirane komponente

Stilizirana komponenta je poput standardne React komponente, sa stilovima. Ima raznih prednosti i mane stiliziranih komponenti, koje je važno uzeti u obzir za ispravnu upotrebu.

Opća sintaksa izgleda ovako:

uvoz stilizirani iz"stilizirane-komponente";

konst ComponentName = styled. DOMElementTag`
 cssProperty: cssValue
`

Ovdje uvozite stilizirani od stilizirana komponenta knjižnica. The stilizirani funkcija je interna metoda koja pretvara JavaScript kôd u stvarni CSS. The Naziv komponente je naziv stilizirane komponente. The DOMElementTag je HTML/JSX element koji namjeravate stilizirati, kao što je div, span, gumb itd.

Da biste stvorili stilizirani gumb pomoću stilizirane komponente, prvo biste izradili React komponentu koja sadrži element gumba.

ovako:

uvoz Reagirati iz"reagirati";
funkcijaDugme() {
povratak (
Dobrodošli!!!</button>
 )
}

Sada možete stvoriti stil za gumb koristeći styled-components:

uvoz stilizirani iz"stilizirane-komponente";
konst StyledButton = styled.button`
 padding: 1rem 0.8rem;
 radijus granice: 15px;
 boja pozadine: siva;
 boja: #FFFFFF;
 veličina fonta: 15px;
`

Kad sve saberete, morat ćete zamijeniti dugme označite s StyledButton komponenta:

uvoz stilizirani iz"stilizirane-komponente";
uvoz Reagirati iz"reagirati";
konst StyledButton = styled.button`
 padding: 1rem 0.8rem;
 radijus granice: 15px;
 boja pozadine: siva;
 boja: #FFFFFF;
 veličina fonta: 15px;
`
funkcijaDugme() {
povratak (
Dobrodošli!!!</StyledButton>
 )
}

Stilovi gniježđenja

Također možete ugniježditi stilove kada radite sa stiliziranim komponentama. Gniježđenje stiliziranih komponenti pomalo je slično koristeći SASS/SCSS Extension Language. Možete ugnijezditi stilove ako komponenta sadrži više oznaka elementa i želi stilizirati svaku oznaku zasebno.

Na primjer:

uvoz Reagirati iz'reagirati';
funkcijaaplikacija() {
povratak (


Stilizirane komponente</h1>


Dobrodošli u styled-components</p>
 </div>
 )
}

Ovaj kod stvara komponentu koja sadrži h1 element i a str element.

Ove elemente možete stilizirati pomoću značajke ugniježđenog stiliziranja stiliziranih komponenti:

uvoz Reagirati iz'reagirati';
uvoz stilizirani iz'styled-components';
konst StyledApp = styled.div`
 boja: #333333;
 poravnanje teksta: središte;
 h1 {
 veličina fonta: 32px;
 font-style: kurziv;
 font-weight: bold;
 razmak između slova: 1.2rem;
 transformacija teksta: velika slova; 
 }
 p {
 margin-block-start: 1rem;
 veličina fonta: 18px;
 }
`
funkcijaaplikacija() {
povratak (

Stilizirane komponente</h1>


Dobrodošli u styled-components</p>
 </StyledApp>
 )
}

Ovaj kod koristi stiliziranu komponentu i ugniježđuje stil za h1 i str oznake.

Stvaranje i korištenje varijabli

Mogućnost stvaranja varijabli izvanredna je značajka biblioteke stiliziranih komponenti. Ova mogućnost daje dinamički stil gdje možete koristiti JavaScript varijable za određivanje stilova.

Za korištenje varijabli u stiliziranim komponentama, stvorite varijablu i dodijelite joj vrijednost CSS svojstva. Tada možete koristiti tu varijablu izravno u svom CSS-u, na primjer:

uvoz stilizirani iz"stilizirane-komponente";
konst Glavna boja = "Crvena";
konst Naslov = styled.h1`
 boja: ${MainColor};
`;
funkcijaaplikacija() {
povratak (
 <>
Pozdrav svijete!</Heading>
 </>
 );
}

U bloku koda iznad, tekst "Pozdrav svijete!” će se prikazati u crvenoj boji.

Imajte na umu da ovaj primjer jednostavno koristi standardnu ​​JavaScript varijablu u literalu predloška u kombinaciji sa stiliziranom komponentom. To je drugačiji pristup od koristeći CSS varijable.

Proširivanje stilova

Nakon što izradite stiliziranu komponentu, upotrijebit ćete je. Možda ćete htjeti napraviti suptilne razlike ili dodati više stila u nekim situacijama. U ovakvim slučajevima možete proširiti stilove.

Da biste proširili stilove, omotate stiliziranu komponentu u stilizirano() konstruktor, a zatim uključite sve dodatne stilove.

U ovom primjeru, Primarni gumb komponenta nasljeđuje stil komponente Gumb i dodaje drugačiju plavu boju pozadine.

uvoz stilizirani iz"stilizirane-komponente";
uvoz Reagirati iz"reagirati";
konst Button = styled.button`
 padding: 1rem 0.8rem;
 radijus granice: 15px;
 boja pozadine: siva;
 boja: #FFFFFF;
 veličina fonta: 15px;
`
konst PrimaryButton = stilizirano (gumb)`
 boja pozadine: plava;
`
funkcijaaplikacija() {
povratak (
dobrodošli</Button>
Pozdrav!</PrimaryButton>
 )
}

Također možete promijeniti oznaku koju stilizirana komponenta prikazuje pomoću kao podupirač

The kao prop vam omogućuje da odredite temeljni HTML/JSX element koji bi stilizirana komponenta prikazala.

Na primjer:

uvoz stilizirani iz"stilizirane-komponente";
uvoz Reagirati iz"reagirati";
konst Button = styled.button`
 padding: 1rem 0.8rem;
 radijus granice: 15px;
 boja pozadine: siva;
 boja: #FFFFFF;
 veličina fonta: 15px;
`
funkcijaaplikacija() {
povratak (
kao='a' href='#'>Dobro došli</Button>
 )
}

Ovaj kod prikazuje Dugme komponenta kao a element, postavljanje svoje href pripisati '#'.

Stvaranje globalnih stilova

Stilizirane komponente obično su ograničene na komponentu, pa se možda pitate kako stilizirati aplikaciju kao cjelinu. Aplikaciju možete stilizirati korištenjem globalnog stila.

Styled-Components nudi a createGlobalStyle funkcija koja vam omogućuje globalno deklariranje stilova. The createGlobalStyle uklanja ograničenja stiliziranja s opsegom komponente i omogućuje deklariranje stilova koji se primjenjuju na svaku komponentu.

Da biste stvorili globalne stilove, uvozite createGlobalStyle funkcionirati i deklarirati stilove koji su vam potrebni.

Na primjer:

uvoz {createGlobalStyle} iz'styled-components';
konst GlobalStyles = stvoritiGlobalStyle`
 @uvoz url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 * {
 margina: 0;
 padding: 0;
 veličina okvira: border-box;
 }
 tijelo {
 boja pozadine: #343434;
 veličina fonta: 15px;
 boja: #FFFFFF;
 obitelj-fontova: 'Montserrat', sans-serif; 
 }
`
izvozzadano GlobalStyles;

Zatim uvozite GlobalStyles komponentu u komponentu aplikacije i renderirajte je. Prikaz GlobalStyles komponenta u vašoj komponenti aplikacije primijenit će stilove na vašu aplikaciju.

ovako:

uvoz Reagirati iz'reagirati';
uvoz GlobalStyles iz'./Globalno';
funkcijaaplikacija() {
povratak (



 </div>
 )
}

Više za stilizirane komponente

Naučili ste kako postaviti, instalirati i koristiti stilizirane komponente u svojoj React aplikaciji. Biblioteka stiliziranih komponenti učinkovit je način oblikovanja vaše React aplikacije. Omogućuje mnoge korisne značajke koje omogućuju fleksibilnost u oblikovanju i dinamično oblikovanje.

Postoji mnogo više stiliziranih komponenti, kao što su animacije, a React je veliki okvir koji osim toga ima mnogo toga za naučiti.