Pri uporabi Reacta je običajno, da svoje sloge shranite v globalno datoteko CSS. To lahko oteži iskanje sloga za določene komponente, zlasti če delate na velikem projektu. Pri oblikovanih komponentah je iskanje sloga za določeno komponento preprosto, ker so v isti datoteki kot komponenta.

Poglejmo, kako nastaviti in integrirati stilizirane komponente v vašo aplikacijo React.

Namestitev knjižnice stiliziranih komponent

Slogirane komponente lahko namestite tako, da v terminalu zaženete ta ukaz:

npm i styled-components

Če želite namestiti stilizirane komponente z uporabo preje, zaženite:

preje dodajte stilizirane komponente

Ustvarjanje stilizirane komponente

Slogirana komponenta je tako kot standardna komponenta React s slogi. Obstajajo različne prednosti in slabosti oblikovanih komponent, ki jih je pomembno upoštevati za pravilno uporabo.

Splošna sintaksa izgleda takole:

uvoz stilizirano od"styled-components";

konst ComponentName = styled. DOMElementTag`
 cssProperty: cssValue
`

Tukaj uvozite stilizirano Iz stilizirana komponenta knjižnica. The stilizirano funkcija je interna metoda, ki pretvori kodo JavaScript v dejanski CSS. The ComponentName je ime stilizirane komponente. The DOMElementTag je element HTML/JSX, ki ga nameravate stilizirati, na primer div, span, gumb itd.

Če želite ustvariti stiliziran gumb s stilizirano komponento, morate najprej ustvariti komponento React, ki vsebuje element gumba.

takole:

uvoz Reagiraj od"reagirati";
funkcijoGumb() {
vrnitev (
Dobrodošli!!!</button>
 )
}

Zdaj lahko ustvarite slog za gumb z uporabo styled-components:

uvoz stilizirano od"styled-components";
konst StyledButton = styled.button`
 oblazinjenje: 1rem 0.8rem;
 mejni polmer: 15px;
 barva ozadja: siva;
 barva: #FFFFFF;
 velikost pisave: 15px;
`

Če sestavite vse skupaj, boste morali zamenjati gumb označite z StyledButton komponenta:

uvoz stilizirano od"styled-components";
uvoz Reagiraj od"reagirati";
konst StyledButton = styled.button`
 oblazinjenje: 1rem 0.8rem;
 mejni polmer: 15px;
 barva ozadja: siva;
 barva: #FFFFFF;
 velikost pisave: 15px;
`
funkcijoGumb() {
vrnitev (
Dobrodošli!!!</StyledButton>
 )
}

Slogi gnezdenja

Sloge lahko tudi ugnezdite, ko delate s stiliziranimi komponentami. Gnezdenje stiliziranih komponent je podobno z uporabo razširitvenega jezika SASS/SCSS. Sloge lahko ugnezdite, če komponenta vsebuje več oznak elementov in želi oblikovati vsako oznako posebej.

Na primer:

uvoz Reagiraj od'reagirati';
funkcijoaplikacija() {
vrnitev (


Slogirane komponente</h1>


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

Ta koda ustvari komponento, ki vsebuje h1 element in a str element.

Te elemente lahko oblikujete s funkcijo ugnezdenega oblikovanja stiliziranih komponent:

uvoz Reagiraj od'reagirati';
uvoz stilizirano od'styled-components';
konst StyledApp = styled.div`
 barva: #333333;
 poravnava besedila: sredina;
 h1 {
 velikost pisave: 32px;
 slog pisave: ležeče;
 teža pisave: krepko;
 razmik med črkami: 1.2rem;
 preoblikovanje besedila: velike črke; 
 }
 p {
 margin-block-start: 1rem;
 velikost pisave: 18px;
 }
`
funkcijoaplikacija() {
vrnitev (

Slogirane komponente</h1>


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

Ta koda uporablja stilizirano komponento in ugnezdi slog za h1 in str oznake.

Ustvarjanje in uporaba spremenljivk

Možnost ustvarjanja spremenljivk je izjemna lastnost knjižnice stiliziranih komponent. Ta zmožnost omogoča dinamično oblikovanje, kjer lahko uporabite spremenljivke JavaScript za določanje slogov.

Če želite uporabiti spremenljivke v stiliziranih komponentah, ustvarite spremenljivko in ji dodelite vrednost lastnosti CSS. Nato lahko to spremenljivko uporabite neposredno v svojem CSS, na primer:

uvoz stilizirano od"styled-components";
konst Glavna barva = "rdeča";
konst Naslov = styled.h1`
 barva: ${MainColor};
`;
funkcijoaplikacija() {
vrnitev (
 <>
Pozdravljen svet!</Heading>
 </>
 );
}

V zgornjem kodnem bloku je besedilo »Pozdravljen, svet!” se prikaže v rdeči barvi.

Upoštevajte, da ta primer preprosto uporablja standardno spremenljivko JavaScript v literalu predloge v povezavi s komponento styled. Gre za drugačen pristop od z uporabo spremenljivk CSS.

Razširitev slogov

Ko ustvarite oblikovano komponento, jo boste uporabili. V nekaterih situacijah boste morda želeli narediti subtilne razlike ali dodati več stila. V takih primerih lahko razširite sloge.

Če želite razširiti sloge, ovijte stilizirano komponento v styled() konstruktor in nato vključite vse dodatne sloge.

V tem primeru je PrimaryButton komponenta podeduje slog komponente Button in doda drugačno modro barvo ozadja.

uvoz stilizirano od"styled-components";
uvoz Reagiraj od"reagirati";
konst Gumb = styled.button`
 oblazinjenje: 1rem 0.8rem;
 mejni polmer: 15px;
 barva ozadja: siva;
 barva: #FFFFFF;
 velikost pisave: 15px;
`
konst PrimaryButton = styled (Gumb)`
 barva ozadja: modra;
`
funkcijoaplikacija() {
vrnitev (
Dobrodošli</Button>
Pozdravljeni!</PrimaryButton>
 )
}

Spremenite lahko tudi oznako, ki jo upodobi stilizirana komponenta z uporabo kot rekvizit.

The kot prop vam omogoča, da določite temeljni element HTML/JSX, kot bi ga upodobila oblikovana komponenta.

Na primer:

uvoz stilizirano od"styled-components";
uvoz Reagiraj od"reagirati";
konst Gumb = styled.button`
 oblazinjenje: 1rem 0.8rem;
 mejni polmer: 15px;
 barva ozadja: siva;
 barva: #FFFFFF;
 velikost pisave: 15px;
`
funkcijoaplikacija() {
vrnitev (
kot='a' href='#'>Dobrodošli</Button>
 )
}

Ta koda upodablja Gumb komponenta kot a element, nastavitev njegovega href atribut '#'.

Ustvarjanje globalnih stilov

Oblikovane komponente so običajno omejene na komponento, zato se morda sprašujete, kako oblikovati aplikacijo kot celoto. Aplikacijo lahko oblikujete z uporabo globalnega sloga.

Styled-Components ponuja a createGlobalStyle funkcija, ki vam omogoča globalno deklariranje slogov. The createGlobalStyle odpravlja omejitev oblikovanja v obsegu komponente in vam omogoča, da deklarirate sloge, ki veljajo za vsako komponento.

Če želite ustvariti globalne sloge, uvozite createGlobalStyle funkcijo in navedite sloge, ki jih potrebujete.

Na primer:

uvoz {createGlobalStyle} od'styled-components';
konst GlobalStyles = ustvari GlobalStyle`
 @uvoz url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 * {
 rob: 0;
 oblazinjenje: 0;
 velikost škatle: border-box;
 }
 telo {
 Barva ozadja: #343434;
 velikost pisave: 15px;
 barva: #FFFFFF;
 družina pisav: "Montserrat", sans-serif; 
 }
`
izvozprivzeto GlobalStyles;

Nato uvozite GlobalStyles komponento v komponento aplikacije in jo upodobite. Upodabljanje GlobalStyles komponenta v komponenti vaše aplikacije bo uporabila sloge za vašo aplikacijo.

takole:

uvoz Reagiraj od'reagirati';
uvoz GlobalStyles od'./Globalno';
funkcijoaplikacija() {
vrnitev (



 </div>
 )
}

Več o oblikovanih komponentah

Naučili ste se nastaviti, namestiti in uporabljati stilizirane komponente v svoji aplikaciji React. Knjižnica stiliziranih komponent je učinkovit način oblikovanja vaše aplikacije React. Zagotavlja številne uporabne funkcije, ki omogočajo prilagodljivost pri oblikovanju in dinamičnem oblikovanju.

Oblikovanih komponent, kot so animacije, je še veliko več, React pa je veliko ogrodje, ki se poleg tega še veliko nauči.