Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Reactin avulla on tyypillistä tallentaa tyylisi globaaliin CSS-tiedostoon. Tämä voi vaikeuttaa tiettyjen komponenttien tyylin löytämistä, varsinkin kun työskentelet suuren projektin parissa. Tyylistetyillä komponenteilla tietyn komponentin tyylin löytäminen on helppoa, koska ne ovat samassa tiedostossa komponentin kanssa.

Katsotaanpa, kuinka voit määrittää ja integroida tyylillisiä komponentteja React-sovellukseesi.

Tyylistettujen komponenttien kirjaston asentaminen

Voit asentaa tyyliteltyjä komponentteja suorittamalla tämän komennon päätteessäsi:

npm i -tyyliset komponentit

Asenna tyylikomponentit langalla suorittamalla:

lanka lisää tyylillisiä komponentteja

Tyylitellun komponentin luominen

Tyylitelty komponentti on aivan kuten tavallinen React-komponentti tyyleineen. Niitä on erilaisia tyylikkäiden komponenttien plussat ja miinukset, jotka on tärkeää ottaa huomioon oikean käytön kannalta.

instagram viewer

Yleinen syntaksi näyttää tältä:

tuonti tyylistä alkaen"tyylilliset komponentit";

konst ComponentName = tyylitelty. DOMElementTag`
 cssProperty: cssValue
`

Täällä tuot tyylistä alkaen tyylitelty komponentti kirjasto. The tyylistä Funktio on sisäinen menetelmä, joka muuntaa JavaScript-koodin todelliseksi CSS: ksi. The Komponentin nimi on tyylitellyn komponentin nimi. The DOMElementTag on HTML/JSX-elementti, jonka aiot muokata, kuten div, span, button jne.

Luodaksesi tyylitellyn painikkeen käyttämällä tyyliteltyä komponenttia, sinun on ensin luotava React-komponentti, joka sisältää painikeelementin.

Niin kuin:

tuonti Reagoi alkaen"reagoi";
toimintoPainike() {
palata (

Nyt voit luoda painikkeelle tyylin tyylikomponenteilla:

tuonti tyylistä alkaen"tyylilliset komponentit";
konst StyledButton = styled.button`
 pehmuste: 1rem 0.8rem;
 rajan säde: 15px;
 taustaväri: harmaa;
 väri: #FFFFFF;
 Fonttikoko: 15px;
`

Kun yhdistät kaiken, sinun on vaihdettava -painiketta tagi kanssa StyledButton komponentti:

tuonti tyylistä alkaen"tyylilliset komponentit";
tuonti Reagoi alkaen"reagoi";
konst StyledButton = styled.button`
 pehmuste: 1rem 0.8rem;
 rajan säde: 15px;
 taustaväri: harmaa;
 väri: #FFFFFF;
 Fonttikoko: 15px;
`
toimintoPainike() {
palata (
Tervetuloa!!!</StyledButton>
 )
}

Sisäkkäiset tyylit

Voit myös sijoittaa tyylejä työskennellessäsi tyyliteltyjen komponenttien kanssa. Tyylisten komponenttien sijoittaminen on vähän samanlaista käyttämällä SASS/SCSS-laajennuskieltä. Voit sijoittaa tyylejä, jos komponentti sisältää useita elementtitunnisteita ja haluaa tyylitellä jokaisen tagin erikseen.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi';
toimintoSovellus() {
palata (


Tyylilliset komponentit</h1>




Tervetuloa tyylillisiin komponentteihin</p>
 </div>
 )
}

Tämä koodi luo komponentin, joka sisältää h1 elementti ja a s elementti.

Voit muotoilla näitä elementtejä käyttämällä tyyliteltyjen komponenttien sisäkkäistä tyyliominaisuutta:

tuonti Reagoi alkaen'reagoi';
tuonti tyylistä alkaen"tyyliset komponentit";
konst StyledApp = styled.div`
 väri: #333333;
 tekstin tasaus: keskellä;


 h1 {
 Fonttikoko: 32px;
 font-tyyli: kursivoitu;
 fontin paino: lihavoitu;
 kirjainväli: 1.2rem;
 tekstin muunnos: isot kirjaimet; 
 }


 p {
 margin-block-start: 1rem;
 Fonttikoko: 18px;
 }
`
toimintoSovellus() {
palata (

Tyylilliset komponentit</h1>




Tervetuloa tyylillisiin komponentteihin</p>
 </StyledApp>
 )
}

Tämä koodi käyttää tyyliteltyä komponenttia ja sisäistää tyylin h1 ja s tunnisteet.

Muuttujien luominen ja käyttäminen

Kyky luoda muuttujia on tyyliteltyjen komponenttien kirjaston merkittävä ominaisuus. Tämä ominaisuus mahdollistaa dynaamisen tyylin, jossa voit määrittää tyylit JavaScript-muuttujien avulla.

Jos haluat käyttää muuttujia tyylisissä komponenteissa, luo muuttuja ja määritä sille CSS-ominaisuuden arvo. Voit sitten käyttää kyseistä muuttujaa suoraan CSS: ssäsi, esimerkiksi:

tuonti tyylistä alkaen"tyylilliset komponentit";
konst Pääväri = "punainen";


konst Otsikko = tyylitelty.h1`
 väri: ${MainColor};
`;
toimintoSovellus() {
palata (
 <>
Hei maailma!</Heading>
 </>
 );
}

Yllä olevassa koodikentässä teksti "Hei maailma!" näkyy punaisena.

Huomaa, että tässä esimerkissä yksinkertaisesti käytetään vakiomuotoista JavaScript-muuttujaa mallin literaalissa yhdessä tyylitellyn komponentin kanssa. Se on erilainen lähestymistapa kuin käyttämällä CSS-muuttujia.

Tyylien laajentaminen

Kun olet luonut tyylitellyn komponentin, käytät komponenttia. Joissakin tilanteissa haluat ehkä tehdä hienovaraisia ​​eroja tai lisätä tyyliä. Tällaisissa tapauksissa voit laajentaa tyylejä.

Laajenna tyylejä käärimällä tyylitelty komponentti tyylitelty () rakentaja ja sisällytä sitten kaikki muut tyylit.

Tässä esimerkissä PrimaryButton komponentti perii Button-komponentin tyylin ja lisää sinisen taustavärin.

tuonti tyylistä alkaen"tyylilliset komponentit";
tuonti Reagoi alkaen"reagoi";
konst Button = styled.button`
 pehmuste: 1rem 0.8rem;
 rajan säde: 15px;
 taustaväri: harmaa;
 väri: #FFFFFF;
 Fonttikoko: 15px;
`


konst PrimaryButton = tyylitelty (painike)`
 taustaväri: sininen;
`
toimintoSovellus() {
palata (

Voit myös muuttaa tyylitellyn komponentin hahmontamaa tunnistetta käyttämällä kuten rekvisiitta.

The kuten prop antaa sinun määrittää taustalla olevan HTML/JSX-elementin, jonka tyylikomponentti hahmontaa.

Esimerkiksi:

tuonti tyylistä alkaen"tyylilliset komponentit";
tuonti Reagoi alkaen"reagoi";
konst Button = styled.button`
 pehmuste: 1rem 0.8rem;
 rajan säde: 15px;
 taustaväri: harmaa;
 väri: #FFFFFF;
 Fonttikoko: 15px;
`
toimintoSovellus() {
palata (

Tämä koodi tekee Painike komponentti an a elementti, asettaen sen href määrittämään '#'.

Globaalien tyylien luominen

Tyylitellyt komponentit on yleensä rajattu komponenttiin, joten saatat miettiä, kuinka muotoilla sovellus kokonaisuudessaan. Voit muokata sovellusta käyttämällä globaalia tyyliä.

Styled-Components tarjoaa a luo GlobalStyle toiminto, jonka avulla voit ilmoittaa tyylejä maailmanlaajuisesti. The luo GlobalStyle poistaa komponenttilaajuisen tyylin rajoituksen ja antaa sinun määrittää tyylit, jotka koskevat jokaista komponenttia.

Voit luoda globaaleja tyylejä tuomalla luo GlobalStyle funktio ja ilmoittaa tarvitsemasi tyylit.

Esimerkiksi:

tuonti {createGlobalStyle} alkaen"tyyliset komponentit";
konst GlobalStyles = CreateGlobalStyle`
 @tuonti url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


 * {
 marginaali: 0;
 pehmuste: 0;
 laatikon koko: border-box;
 }


 body {
 taustaväri: #343434;
 Fonttikoko: 15px;
 väri: #FFFFFF;
 font-family: "Montserrat", sans-serif; 
 }
`
viedäoletuksena GlobalStyles;

Sitten tuot GlobalStyles komponentti sovelluskomponenttiin ja renderöi se. Renderöimällä GlobalStyles sovelluksesi komponentti käyttää tyylejä sovelluksessasi.

Niin kuin:

tuonti Reagoi alkaen'reagoi';
tuonti GlobalStyles alkaen'./Globaali';
toimintoSovellus() {
palata (



 </div>
 )
}

Lisää tyyliteltyihin komponentteihin

Olet oppinut määrittämään, asentamaan ja käyttämään tyyliteltyjä komponentteja React-sovelluksessasi. Tyylitettyjen komponenttien kirjasto on tehokas tapa muotoilla React-sovelluksesi. Se tarjoaa monia hyödyllisiä ominaisuuksia, jotka mahdollistavat joustavuuden muotoilussa ja dynaamisessa muotoilussa.

Tyylillisiä komponentteja, kuten animaatioita, on paljon enemmän, ja React on iso kehys, jossa on paljon opittavaa.