Izmantojot React, stilus parasti saglabā globālā CSS failā. Tas var apgrūtināt noteiktu komponentu stila atrašanu, it īpaši, ja strādājat pie liela projekta. Izmantojot stilizētos komponentus, ir viegli atrast konkrēta komponenta stilu, jo tie atrodas tajā pašā failā kā komponents.

Apskatīsim, kā iestatīt un integrēt stila komponentus jūsu React lietojumprogrammā.

Stilizēto komponentu bibliotēkas instalēšana

Jūs varat instalēt stilizētus komponentus, izpildot šo komandu terminālī:

npm i styled-components

Lai instalētu veidotus komponentus, izmantojot dziju, palaidiet:

dzija pievieno stila komponentus

Stilizēta komponenta izveide

Stilizēts komponents ir tāpat kā standarta React komponents ar stiliem. Ir dažādas stilizētu komponentu plusi un mīnusi, kas ir svarīgi ņemt vērā pareizai lietošanai.

Vispārējā sintakse izskatās šādi:

imports stilizēts no"stilizētās sastāvdaļas";

konst ComponentName = veidots. DOMElementTag`
 cssProperty: cssValue
`

Šeit jūs importējat stilizēts no stilizēts komponents bibliotēka. The stilizēts funkcija ir iekšēja metode, kas pārvērš JavaScript kodu faktiskā CSS. The Komponenta nosaukums ir stilizētā komponenta nosaukums. The DOMElementTag ir HTML/JSX elements, kuru plānojat veidot, piemēram, div, span, poga utt.

Lai izveidotu stilizētu pogu, izmantojot stilizētu komponentu, vispirms jāizveido React komponents, kas satur pogas elementu.

Tā kā:

imports Reaģēt no"reaģēt";
funkcijuPoga() {
atgriezties (
Laipni lūdzam!!!</button>
 )
}

Tagad varat izveidot pogas stilu, izmantojot stilizētus komponentus:

imports stilizēts no"stilizētās sastāvdaļas";
konst StyledButton = styled.button`
 polsterējums: 1rem 0.8rem;
 robežas rādiuss: 15px;
 fona krāsa: pelēka;
 krāsa: #FFFFFF;
 fonta izmērs: 15px;
`

Saliekot visu kopā, jums būs jāaizstāj pogu atzīmējiet ar StyledButton komponents:

imports stilizēts no"stilizētās sastāvdaļas";
imports Reaģēt no"reaģēt";
konst StyledButton = styled.button`
 polsterējums: 1rem 0.8rem;
 robežas rādiuss: 15px;
 fona krāsa: pelēka;
 krāsa: #FFFFFF;
 fonta izmērs: 15px;
`
funkcijuPoga() {
atgriezties (
Laipni lūdzam!!!</StyledButton>
 )
}

Ligzdošanas stili

Varat arī ligzdot stilus, strādājot ar stilizētiem komponentiem. Komponentu ligzdošana ir nedaudz līdzīga izmantojot SASS/SCSS paplašinājuma valodu. Varat ligzdot stilus, ja komponentā ir vairāki elementu tagi un katrs tags vēlas veidot stilu atsevišķi.

Piemēram:

imports Reaģēt no'reaģēt';
funkcijuApp() {
atgriezties (


Stilizētas sastāvdaļas</h1>


Laipni lūdzam stila komponentos</p>
 </div>
 )
}

Šis kods izveido komponentu, kas satur h1 elements un a lpp elements.

Varat veidot šos elementus, izmantojot stilizētu komponentu ligzdoto stila funkciju:

imports Reaģēt no'reaģēt';
imports stilizēts no'stilizēti komponenti';
konst StyledApp = styled.div`
 krāsa: #333333;
 teksta līdzināšana: centrs;
 h1 {
 fonta izmērs: 32px;
 fonta stils: slīpraksts;
 fonta svars: treknrakstā;
 burtu atstarpes: 1.2rem;
 teksta pārveidošana: lielie burti; 
 }
 p {
 margin-block-start: 1rem;
 fonta izmērs: 18px;
 }
`
funkcijuApp() {
atgriezties (

Stilizētas sastāvdaļas</h1>


Laipni lūdzam stila komponentos</p>
 </StyledApp>
 )
}

Šajā kodā tiek izmantots stilizēts komponents un tiek ievietots stils h1 un lpp tagus.

Mainīgo izveide un izmantošana

Iespēja izveidot mainīgos ir ievērojama stila komponentu bibliotēkas iezīme. Šī iespēja nodrošina dinamisku stilu, kurā varat izmantot JavaScript mainīgos, lai noteiktu stilus.

Lai izmantotu mainīgos veidotos komponentos, izveidojiet mainīgo un piešķiriet tam CSS rekvizīta vērtību. Pēc tam varat izmantot šo mainīgo tieši savā CSS, piemēram:

imports stilizēts no"stilizētās sastāvdaļas";
konst Galvenā krāsa = "sarkans";
konst Virsraksts = veidots.h1`
 krāsa: ${MainColor};
`;
funkcijuApp() {
atgriezties (
 <>
Sveika pasaule!</Heading>
 </>
 );
}

Iepriekš esošajā koda blokā teksts "Sveika pasaule!” tiks parādīta sarkanā krāsā.

Ņemiet vērā, ka šajā piemērā vienkārši tiek izmantots standarta JavaScript mainīgais veidnes literālā saistībā ar stila komponentu. Tā ir atšķirīga pieeja no izmantojot CSS mainīgos.

Stilu paplašināšana

Pēc stilizēta komponenta izveides jūs to izmantosit. Dažās situācijās varat veikt smalkas atšķirības vai pievienot vairāk stila. Šādos gadījumos varat paplašināt stilus.

Lai paplašinātu stilus, iesaiņojiet veidoto komponentu veidots () konstruktoru un pēc tam iekļaujiet visus papildu stilus.

Šajā piemērā Primārā poga komponents pārmanto Button komponenta stilu un pievieno citu zilu fona krāsu.

imports stilizēts no"stilizētās sastāvdaļas";
imports Reaģēt no"reaģēt";
konst Poga = styled.button`
 polsterējums: 1rem 0.8rem;
 robežas rādiuss: 15px;
 fona krāsa: pelēka;
 krāsa: #FFFFFF;
 fonta izmērs: 15px;
`
konst PrimaryButton = veidots (poga)`
 fona krāsa: zila;
`
funkcijuApp() {
atgriezties (
Laipni lūdzam</Button>
Sveiki!</PrimaryButton>
 )
}

Varat arī mainīt tagu, ko stilizētais komponents renderē, izmantojot kā butaforija.

The kā prop ļauj norādīt pamatā esošo HTML/JSX elementu, kuru veidotais komponents atveidotu.

Piemēram:

imports stilizēts no"stilizētās sastāvdaļas";
imports Reaģēt no"reaģēt";
konst Poga = styled.button`
 polsterējums: 1rem 0.8rem;
 robežas rādiuss: 15px;
 fona krāsa: pelēka;
 krāsa: #FFFFFF;
 fonta izmērs: 15px;
`
funkcijuApp() {
atgriezties (
kā="a" href='#'>Laipni lūdzam</Button>
 )
}

Šis kods atveido Poga sastāvdaļa kā an a elements, nosakot tā href atribūtu “#”.

Globālo stilu izveide

Stilizētie komponenti parasti tiek attiecināti uz komponentu, tāpēc jums varētu rasties jautājums, kā veidot stilu lietojumprogrammu kopumā. Lietojumprogrammu var veidot, izmantojot globālo stilu.

Styled-Components piedāvā a izveidot GlobalStyle funkcija, kas ļauj deklarēt stilus globāli. The izveidot GlobalStyle noņem komponentu tvēruma stila ierobežojumu un ļauj deklarēt stilus, kas attiecas uz katru komponentu.

Lai izveidotu globālus stilus, importējiet izveidot GlobalStyle funkciju un deklarējiet nepieciešamos stilus.

Piemēram:

imports {createGlobalStyle} no'stilizēti komponenti';
konst GlobalStyles = CreateGlobalStyle`
 @imports url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 * {
 piemale: 0;
 polsterējums: 0;
 kastes izmēra noteikšana: apmale-box;
 }
 body {
 fona krāsa: #343434;
 fonta izmērs: 15px;
 krāsa: #FFFFFF;
 fontu ģimene: "Monserrata", sans serif; 
 }
`
eksportētnoklusējuma GlobalStyles;

Pēc tam jūs importējat Globālie stili lietotnes komponentā un renderējiet to. Atveidojot Globālie stili jūsu lietotnes komponents lietos stilus jūsu lietojumprogrammai.

Tā kā:

imports Reaģēt no'reaģēt';
imports Globālie stili no'./Globāls';
funkcijuApp() {
atgriezties (



 </div>
 )
}

Vairāk par stilizētiem komponentiem

Jūs esat iemācījies savā React lietojumprogrammā iestatīt, instalēt un izmantot stilizētus komponentus. Stilizēto komponentu bibliotēka ir efektīvs veids, kā veidot React lietojumprogrammu. Tas nodrošina daudzas noderīgas funkcijas, kas nodrošina elastīgumu veidošanā un dinamiskā veidošanā.

Stilizētiem komponentiem, piemēram, animācijām, ir daudz vairāk, un React ir liels ietvars ar daudz ko mācīties.