Reacti kasutamisel on tüüpiline salvestada oma stiilid globaalsesse CSS-faili. See võib raskendada konkreetsete komponentide stiili leidmist, eriti kui töötate suure projekti kallal. Stiiliga komponentide puhul on konkreetse komponendi stiili leidmine lihtne, kuna need asuvad komponendiga samas failis.

Vaatame, kuidas seadistada ja integreerida oma Reacti rakenduses stiilseid komponente.

Stiilitud komponentide raamatukogu installimine

Saate installida stiiliga komponente, käivitades oma terminalis selle käsu:

npm i stiilis komponendid

Stiilikomponentide installimiseks lõnga abil käivitage:

lõng lisage stiilseid komponente

Stiilitud komponendi loomine

Stiilitud komponent sarnaneb stiilidega nagu tavaline Reacti komponent. Neid on erinevaid stiilikomponentide plussid ja miinused, mida on õigeks kasutamiseks oluline arvestada.

Üldine süntaks näeb välja selline:

importida stiilis alates"stiilis komponendid";

konst ComponentName = stiiliga. DOMElementTag`
 cssProperty: cssValue
`

Siin impordite stiilis alates stiililine komponent raamatukogu. The stiilis Funktsioon on sisemine meetod, mis teisendab JavaScripti koodi tegelikuks CSS-iks. The Komponendi nimi on stiiliga komponendi nimi. The DOMElementTag on HTML/JSX-element, mida kavatsete stiilida, näiteks div, span, nupp jne.

Stiiliga nupu loomiseks stiiliga komponendi abil peate esmalt looma nupuelementi sisaldava Reacti komponendi.

Nagu nii:

importida Reageerige alates"reageerida";
funktsiooniNupp() {
tagasi (
Tere tulemast!!!</button>
 )
}

Nüüd saate stiilikomponentide abil luua nupule stiili:

importida stiilis alates"stiilis komponendid";
konst StyledButton = styled.button`
 polsterdus: 1rem 0.8rem;
 piiri raadius: 15px;
 taustavärv: hall;
 värv: #FFFFFF;
 fondi suurus: 15px;
`

Kui kõik kokku panna, peate selle välja vahetama nuppu märgistage Stiilinupp komponent:

importida stiilis alates"stiilis komponendid";
importida Reageerige alates"reageerida";
konst StyledButton = styled.button`
 polsterdus: 1rem 0.8rem;
 piiri raadius: 15px;
 taustavärv: hall;
 värv: #FFFFFF;
 fondi suurus: 15px;
`
funktsiooniNupp() {
tagasi (
Tere tulemast!!!</StyledButton>
 )
}

Pesastamisstiilid

Stiilitud komponentidega töötades saate stiile pesastada. Stiilis komponentide pesastamine on natuke sarnane kasutades SASS/SCSS laienduskeelt. Saate stiile pesastada, kui komponent sisaldab mitut elemendimärgendit ja soovib iga sildi stiili eraldi kujundada.

Näiteks:

importida Reageerige alates'reageeri';
funktsiooniRakendus() {
tagasi (


Stiilitud komponendid</h1>


Tere tulemast stiilitud komponentide juurde</p>
 </div>
 )
}

See kood loob komponendi, mis sisaldab h1 element ja a lk element.

Saate neid elemente stiilida, kasutades stiiliga komponentide pesastatud stiilifunktsiooni.

importida Reageerige alates'reageeri';
importida stiilis alates"stiilis komponendid";
konst StyledApp = styled.div`
 värv: #333333;
 teksti joondamine: keskel;
 h1 {
 fondi suurus: 32px;
 fondi stiil: kaldkiri;
 fondi kaal: paks;
 tähevahed: 1.2rem;
 text-transform: suurtähtedega; 
 }
 p {
 margin-block-start: 1rem;
 fondi suurus: 18px;
 }
`
funktsiooniRakendus() {
tagasi (

Stiilitud komponendid</h1>


Tere tulemast stiilitud komponentide juurde</p>
 </StyledApp>
 )
}

See kood kasutab stiiliga komponenti ja pesastab stiili jaoks h1 ja lk sildid.

Muutujate loomine ja kasutamine

Võimalus luua muutujaid on stiilikomponentide teegi märkimisväärne omadus. See võimalus annab dünaamilise stiili, kus saate stiilide määramiseks kasutada JavaScripti muutujaid.

Muutujate kasutamiseks stiilikomponentides looge muutuja ja määrake sellele CSS-i atribuudi väärtus. Seejärel saate seda muutujat kasutada otse oma CSS-is, näiteks:

importida stiilis alates"stiilis komponendid";
konst Põhivärv = "punane";
konst Pealkiri = stiiliga.h1`
 värv: ${MainColor};
`;
funktsiooniRakendus() {
tagasi (
 <>
Tere maailm!</Heading>
 </>
 );
}

Ülaltoodud koodiplokis on tekst "Tere, Maailm!” kuvatakse punase värviga.

Pange tähele, et see näide kasutab lihtsalt standardset JavaScripti muutujat malliliteraalis koos stiilikomponendiga. See on erinev lähenemine kasutades CSS-i muutujaid.

Stiilide laiendamine

Pärast stiiliga komponendi loomist kasutate komponenti. Mõnes olukorras võite soovida teha peeneid erinevusi või lisada rohkem stiili. Sellistel juhtudel saate stiile laiendada.

Stiilide laiendamiseks mähkige stiiliga komponent sisse stiilis() konstruktor ja seejärel lisage kõik täiendavad stiilid.

Selles näites on PrimaryButton komponent pärib nupu komponendi stiili ja lisab erineva sinise taustavärvi.

importida stiilis alates"stiilis komponendid";
importida Reageerige alates"reageerida";
konst Nupp = stiiliga.nupp`
 polsterdus: 1rem 0.8rem;
 piiri raadius: 15px;
 taustavärv: hall;
 värv: #FFFFFF;
 fondi suurus: 15px;
`
konst PrimaryButton = stiiliga (nupp)`
 taustavärv: sinine;
`
funktsiooniRakendus() {
tagasi (
Tere tulemast</Button>
Tere!</PrimaryButton>
 )
}

Saate muuta ka stiiliga komponendi renderdatavat silti kasutades nagu rekvisiit.

The nagu prop võimaldab määrata aluseks oleva HTML/JSX elemendi, millena stiilikomponent renderdab.

Näiteks:

importida stiilis alates"stiilis komponendid";
importida Reageerige alates"reageerida";
konst Nupp = stiiliga.nupp`
 polsterdus: 1rem 0.8rem;
 piiri raadius: 15px;
 taustavärv: hall;
 värv: #FFFFFF;
 fondi suurus: 15px;
`
funktsiooniRakendus() {
tagasi (
nagu='a' href='#'>Tere tulemast</Button>
 )
}

See kood muudab Nupp komponent kui an a element, määrates selle href atribuut "#".

Globaalsete stiilide loomine

Stiilitud komponendid on tavaliselt hõlmatud komponendiga, nii et võite küsida, kuidas rakendust tervikuna stiilida. Rakendust saate kujundada globaalse stiili abil.

Styled-Components pakub a loo GlobalStyle funktsioon, mis võimaldab teil stiile globaalselt deklareerida. The loo GlobalStyle eemaldab komponendi ulatusega stiilipiirangu ja võimaldab deklareerida stiile, mis kehtivad iga komponendi kohta.

Globaalsete stiilide loomiseks importige loo GlobalStyle funktsiooni ja deklareerige soovitud stiilid.

Näiteks:

importida {createGlobalStyle} alates"stiilis komponendid";
konst GlobalStyles = CreateGlobalStyle`
 @importida url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 * {
 marginaal: 0;
 polsterdus: 0;
 box-sizing: border-box;
 }
 keha {
 taustavärv: #343434;
 fondi suurus: 15px;
 värv: #FFFFFF;
 font-perekond: "Montserrat", sans-serif; 
 }
`
eksportidavaikimisi GlobalStyles;

Seejärel impordite Globaalsed stiilid komponendi oma rakenduse komponendiks ja renderdage see. Renderdades Globaalsed stiilid Rakenduse komponent rakendab teie rakendusele stiile.

Nagu nii:

importida Reageerige alates'reageeri';
importida Globaalsed stiilid alates'./Globaalne';
funktsiooniRakendus() {
tagasi (



 </div>
 )
}

Rohkem Stiilikomponentide kohta

Olete õppinud, kuidas oma Reacti rakenduses stiilikomponente seadistada, installida ja kasutada. Stiilitud komponentide teek on tõhus viis teie Reacti rakenduse stiili kujundamiseks. See pakub palju kasulikke funktsioone, mis võimaldavad kujundamisel ja dünaamilisel kujundamisel paindlikkust.

Stiiliga komponente, näiteks animatsioone, on veel palju ja React on suur raamistik, millel on lisaks veel palju õppida.