Naudojant React stilius įprasta išsaugoti visuotiniame CSS faile. Dėl to gali būti sunku rasti konkrečių komponentų stilių, ypač kai dirbate su dideliu projektu. Naudojant stiliaus komponentus lengva rasti konkretaus komponento stilių, nes jie yra tame pačiame faile kaip ir komponentas.

Pažiūrėkime, kaip nustatyti ir integruoti stiliaus komponentus „React“ programoje.

Stilių komponentų bibliotekos diegimas

Galite įdiegti stiliaus komponentus paleisdami šią komandą savo terminale:

npm i stiliaus komponentai

Norėdami įdiegti stiliaus komponentus naudodami siūlą, paleiskite:

verpalai pridėti stilizuotų komponentų

Stilinio komponento kūrimas

Stilių komponentas yra kaip standartinis „React“ komponentas su stiliais. Yra įvairių stilizuotų komponentų privalumai ir trūkumai, į kuriuos svarbu atsižvelgti norint tinkamai naudoti.

Bendroji sintaksė atrodo taip:

importuoti stiliaus iš„stiliaus komponentai“;

konst ComponentName = stiliaus. DOMElementTag`
 cssProperty: cssValue
`

Čia jūs importuojate stiliaus nuo stiliaus komponentas biblioteka. The stiliaus funkcija yra vidinis metodas, konvertuojantis JavaScript kodą į tikrąjį CSS. The Komponento pavadinimas yra stiliaus komponento pavadinimas. The DOMElementTag yra HTML / JSX elementas, kurį ketinate formuoti, pvz., div, span, mygtukas ir kt.

Norėdami sukurti stiliaus mygtuką naudodami stiliaus komponentą, pirmiausia sukurkite React komponentą, kuriame yra mygtuko elementas.

Kaip taip:

importuoti Reaguoti iš"reaguoti";
funkcijaMygtukas() {
grąžinti (
Sveiki atvykę!!!</button>
 )
}

Dabar galite sukurti mygtuko stilių naudodami stiliaus komponentus:

importuoti stiliaus iš„stiliaus komponentai“;
konst StyledButton = styled.button`
 pamušalas: 1rem 0.8rem;
 sienos spindulys: 15px;
 fono spalva: pilka;
 spalva: #FFFFFF;
 šrifto dydis: 15px;
`

Sudėjus viską, reikės pakeisti mygtuką pažymėkite su Stilingas mygtukas komponentas:

importuoti stiliaus iš„stiliaus komponentai“;
importuoti Reaguoti iš"reaguoti";
konst StyledButton = styled.button`
 pamušalas: 1rem 0.8rem;
 sienos spindulys: 15px;
 fono spalva: pilka;
 spalva: #FFFFFF;
 šrifto dydis: 15px;
`
funkcijaMygtukas() {
grąžinti (
Sveiki atvykę!!!</StyledButton>
 )
}

Įdėjimo stiliai

Taip pat galite įdėti stilių, kai dirbate su stiliaus komponentais. Stiliaus sudedamųjų dalių įdėjimas yra šiek tiek panašus į naudojant SASS/SCSS plėtinio kalbą. Galite įdėti stilius, jei komponente yra kelios elementų žymos ir norima nustatyti kiekvienos žymos stilių atskirai.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
funkcijaProgramėlė() {
grąžinti (


Stilizuoti komponentai</h1>


Sveiki atvykę į stilizuotus komponentus</p>
 </div>
 )
}

Šis kodas sukuria komponentą, kuriame yra h1 elementas ir a p elementas.

Galite formuoti šių elementų stilių naudodami stilizuotų komponentų įdėto stiliaus funkciją:

importuoti Reaguoti iš'reaguoti';
importuoti stiliaus iš„stiliuotieji komponentai“;
konst StyledApp = styled.div`
 spalva: #333333;
 teksto lygiavimas: centre;
 h1 {
 šrifto dydis: 32px;
 šrifto stilius: kursyvas;
 šrifto svoris: paryškintas;
 tarpai tarp raidžių: 1.2rem;
 teksto transformavimas: didžiosios raidės; 
 }
 p {
 margin-block-start: 1rem;
 šrifto dydis: 18px;
 }
`
funkcijaProgramėlė() {
grąžinti (

Stilizuoti komponentai</h1>


Sveiki atvykę į stilizuotus komponentus</p>
 </StyledApp>
 )
}

Šiame kode naudojamas stiliaus komponentas ir įterpiamas stilius h1 ir p žymės.

Kintamųjų kūrimas ir naudojimas

Galimybė kurti kintamuosius yra puiki stiliaus komponentų bibliotekos savybė. Ši galimybė suteikia dinaminį stilių, kai stiliams nustatyti galite naudoti „JavaScript“ kintamuosius.

Norėdami naudoti kintamuosius stiliaus komponentuose, sukurkite kintamąjį ir priskirkite jam CSS ypatybės reikšmę. Tada galite naudoti tą kintamąjį tiesiogiai savo CSS, pavyzdžiui:

importuoti stiliaus iš„stiliaus komponentai“;
konst Pagrindinė spalva = "raudona";
konst Antraštė = stilizuota.h1`
 spalva: ${MainColor};
`;
funkcijaProgramėlė() {
grąžinti (
 <>
Sveikas pasauli!</Heading>
 </>
 );
}

Aukščiau esančiame kodo bloke tekstas „Labas pasauli!“ bus rodoma raudona spalva.

Atminkite, kad šiame pavyzdyje tiesiog naudojamas standartinis „JavaScript“ kintamasis šablono literatūroje kartu su stiliaus komponentu. Tai kitoks požiūris nei naudojant CSS kintamuosius.

Stilių išplėtimas

Sukūrę stiliaus komponentą, jį panaudosite. Kai kuriose situacijose galbūt norėsite padaryti subtilių skirtumų arba pridėti daugiau stiliaus. Tokiais atvejais galite išplėsti stilius.

Norėdami išplėsti stilius, apvyniokite stiliaus komponentą į stilizuotas () konstruktorių ir įtraukite bet kokius papildomus stilius.

Šiame pavyzdyje Pagrindinis mygtukas komponentas paveldi mygtuko komponento stilių ir prideda kitą mėlyną fono spalvą.

importuoti stiliaus iš„stiliaus komponentai“;
importuoti Reaguoti iš"reaguoti";
konst Mygtukas = stilizuotas.mygtukas`
 pamušalas: 1rem 0.8rem;
 sienos spindulys: 15px;
 fono spalva: pilka;
 spalva: #FFFFFF;
 šrifto dydis: 15px;
`
konst PrimaryButton = stiliaus (mygtukas)`
 fono spalva: mėlyna;
`
funkcijaProgramėlė() {
grąžinti (
Sveiki atvykę </Button>
Sveiki! </PrimaryButton>
 )
}

Taip pat galite pakeisti žymą, kurią stilizuotas komponentas pateikia naudodami kaip rekvizitas.

The kaip prop leidžia nurodyti pagrindinį HTML/JSX elementą, kurį stiliaus komponentas atvaizduotų kaip.

Pavyzdžiui:

importuoti stiliaus iš„stiliaus komponentai“;
importuoti Reaguoti iš"reaguoti";
konst Mygtukas = stilizuotas.mygtukas`
 pamušalas: 1rem 0.8rem;
 sienos spindulys: 15px;
 fono spalva: pilka;
 spalva: #FFFFFF;
 šrifto dydis: 15px;
`
funkcijaProgramėlė() {
grąžinti (
kaip='a' href='#'>Sveiki atvykę</Button>
 )
}

Šis kodas atvaizduoja Mygtukas komponentas kaip an a elementas, nustatantis jo href priskirti '#'.

Pasaulinių stilių kūrimas

Stilizuoti komponentai paprastai priskiriami prie komponento, todėl jums gali kilti klausimas, kaip sukurti visos programos stilių. Galite sukurti programos stilių naudodami visuotinį stilių.

„Styled-Components“ siūlo a sukurti GlobalStyle funkcija, leidžianti deklaruoti stilius visame pasaulyje. The sukurti GlobalStyle pašalina komponentų apimties stiliaus apribojimą ir leidžia deklaruoti stilius, taikomus kiekvienam komponentui.

Norėdami sukurti visuotinius stilius, importuokite sukurti GlobalStyle funkcija ir deklaruokite jums reikalingus stilius.

Pavyzdžiui:

importuoti {createGlobalStyle} iš„stiliuotieji komponentai“;
konst GlobalStyles = CreateGlobalStyle`
 @importuoti url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 * {
 marža: 0;
 pamušalas: 0;
 dėžutės dydis: bortelis-dėžė;
 }
 kūnas {
 fono spalva: #343434;
 šrifto dydis: 15px;
 spalva: #FFFFFF;
 šrifto šeima: "Montserratas", sans-serif; 
 }
`
eksportuotinumatytas GlobalStyles;

Tada importuojate GlobalStyles komponentą į programos komponentą ir atvaizduokite jį. Atvaizdavimas GlobalStyles jūsų programos komponentas taikys stilius jūsų programai.

Kaip taip:

importuoti Reaguoti iš'reaguoti';
importuoti GlobalStyles iš„./Global“;
funkcijaProgramėlė() {
grąžinti (



 </div>
 )
}

Daugiau apie stilizuotus komponentus

Sužinojote, kaip React programoje nustatyti, įdiegti ir naudoti stiliaus komponentus. Stilių komponentų biblioteka yra efektyvus būdas sukurti React programos stilių. Jame yra daug naudingų funkcijų, kurios suteikia galimybę lanksčiai formuoti ir dinamiškai formuoti.

Yra daug daugiau stilizuotų komponentų, pvz., animacijų, o „React“ yra didelis pagrindas, kuriame be to reikia daug išmokti.