Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A React használatával jellemző, hogy a stílusokat globális CSS-fájlba menti. Ez megnehezítheti az egyes összetevők stílusának megtalálását, különösen akkor, ha nagy projekten dolgozik. A stílusos összetevők segítségével könnyen megtalálhatja egy adott összetevő stílusát, mert ugyanabban a fájlban vannak, mint az összetevő.

Nézzük meg, hogyan állíthat be és integrálhat stílusos összetevőket a React alkalmazásban.

A stílusos összetevők könyvtárának telepítése

Stílusos összetevőket telepíthet a következő parancs futtatásával a terminálon:

npm i styled-components

A stílusos összetevők fonal használatával történő telepítéséhez futtassa:

fonal stílusos összetevőket ad hozzá

Stílusos komponens létrehozása

A stílusos komponens olyan, mint egy szabványos React komponens, stílusokkal. Vannak különféle a stílusos alkatrészek előnyei és hátrányai, amelyeket fontos figyelembe venni a helyes használat érdekében.

instagram viewer

Az általános szintaxis így néz ki:

import stílusú tól től"stílusos komponensek";

const ComponentName = stílusos. DOMElementTag`
 cssProperty: cssValue
`

Itt importálod stílusú tól stílusú-komponens könyvtár. A stílusú A függvény egy belső módszer, amely a JavaScript kódot tényleges CSS-vé alakítja. A ComponentName a stílusos összetevő neve. A DOMElementTag az a HTML/JSX elem, amelyet stílusozni kíván, például div, span, button stb.

Stílusos gomb stílusos összetevővel történő létrehozásához először létre kell hoznia egy gombelemet tartalmazó React összetevőt.

Például így:

import Reagál tól től"reagál";
funkcióGomb() {
Visszatérés (

Most stílusos összetevők segítségével létrehozhat egy stílust a gombhoz:

import stílusú tól től"stílusos komponensek";
const StyledButton = styled.button`
 párnázás: 1rem 0.8rem;
 határsugár: 15px;
 háttérszín: szürke;
 szín: #FFFFFF;
 betűméret: 15px;
`

Mindent összerakva ki kell cserélni gomb címkével a StyledButton összetevő:

import stílusú tól től"stílusos komponensek";
import Reagál tól től"reagál";
const StyledButton = styled.button`
 párnázás: 1rem 0.8rem;
 határsugár: 15px;
 háttérszín: szürke;
 szín: #FFFFFF;
 betűméret: 15px;
`
funkcióGomb() {
Visszatérés (
Isten hozott!!!</StyledButton>
 )
}

Beágyazási stílusok

Stílusokat is beágyazhat, ha stílusos összetevőkkel dolgozik. A stílusos komponensek egymásba ágyazása egy kicsit hasonló a SASS/SCSS kiterjesztési nyelv használatával. Beágyazhat stílusokat, ha egy összetevő több elemcímkét tartalmaz, és az egyes címkéket egyenként szeretné stílusozni.

Például:

import Reagál tól től'reagál';
funkcióApp() {
Visszatérés (


Stílusos alkatrészek</h1>




Üdvözöljük a stílusos összetevőknél</p>
 </div>
 )
}

Ez a kód létrehoz egy komponenst, amely tartalmaz egy h1 elem és a p elem.

Ezeket az elemeket stílusozhatja a stílusos összetevők beágyazott stílus funkciójával:

import Reagál tól től'reagál';
import stílusú tól től"stílusú összetevők";
const StyledApp = styled.div`
 szín: #333333;
 szöveg igazítása: középre;


 h1 {
 betűméret: 32px;
 betűstílus: dőlt;
 betűsúly: félkövér;
 betűtávolságok: 1.2rem;
 szöveg-átalakítás: nagybetűk; 
 }


 p {
 margin-block-start: 1rem;
 betűméret: 18px;
 }
`
funkcióApp() {
Visszatérés (

Stílusos alkatrészek</h1>




Üdvözöljük a stílusos összetevőknél</p>
 </StyledApp>
 )
}

Ez a kód stílusos összetevőt használ, és beágyazza a stílust a h1 és p címkéket.

Változók létrehozása és használata

A változók létrehozásának képessége a stílusos összetevők könyvtárának figyelemre méltó jellemzője. Ez a képesség dinamikus stílust biztosít, ahol JavaScript-változókat használhat a stílusok meghatározásához.

Változók stílusos összetevőkben való használatához hozzon létre egy változót, és rendeljen hozzá egy CSS-tulajdonságértéket. Ezt a változót ezután közvetlenül a CSS-ben használhatja, például:

import stílusú tól től"stílusos komponensek";
const MainColor = "piros";


const Címsor = stílusos.h1`
 szín: ${MainColor};
`;
funkcióApp() {
Visszatérés (
 <>
Helló világ!</Heading>
 </>
 );
}

A fenti kódblokkban a „Helló Világ!” piros színnel jelenik meg.

Vegye figyelembe, hogy ez a példa egyszerűen egy szabványos JavaScript-változót használ a sablon literáljában a stílusos összetevővel együtt. Ez más megközelítés, mint CSS-változók használatával.

Stílusok kiterjesztése

A stílusos összetevő létrehozása után használni fogja az összetevőt. Előfordulhat, hogy bizonyos helyzetekben finom különbségeket kell tennie, vagy több stílust kell hozzáadnia. Ilyen esetekben bővítheti a stílusokat.

A stílusok kiterjesztéséhez csomagolja be a stílusos összetevőt a stílusos() konstruktort, majd tartalmazzon bármilyen további stílust.

Ebben a példában a PrimaryButton összetevő örökli a Button összetevő stílusát, és egy másik kék háttérszínt ad hozzá.

import stílusú tól től"stílusos komponensek";
import Reagál tól től"reagál";
const Gomb = stílusos.gomb`
 párnázás: 1rem 0.8rem;
 határsugár: 15px;
 háttérszín: szürke;
 szín: #FFFFFF;
 betűméret: 15px;
`


const PrimaryButton = stílusos (Button)`
 háttérszín: kék;
`
funkcióApp() {
Visszatérés (

A stílusos összetevő által megjelenített címkét a következővel is módosíthatja mint egy kelléket.

A mint A prop lehetővé teszi annak a mögöttes HTML/JSX elemnek a megadását, amelyet a stílusos összetevő megjelenítene.

Például:

import stílusú tól től"stílusos komponensek";
import Reagál tól től"reagál";
const Gomb = stílusos.gomb`
 párnázás: 1rem 0.8rem;
 határsugár: 15px;
 háttérszín: szürke;
 szín: #FFFFFF;
 betűméret: 15px;
`
funkcióApp() {
Visszatérés (

Ez a kód a Gomb komponens, mint an a elem, annak beállítása href tulajdonít neki '#'.

Globális stílusok létrehozása

A stílusos összetevők általában egy összetevőre vonatkoznak, ezért felmerülhet a kérdés, hogyan alakíthatja ki az alkalmazás egészét. Az alkalmazás stílusát a globális stílus használatával alakíthatja.

Styled-Components kínál a CreateGlobalStyle függvény, amely lehetővé teszi a stílusok globális deklarálását. A CreateGlobalStyle eltávolítja a komponens-hatókörű stílus megszorítását, és lehetővé teszi az összes összetevőre érvényes stílusok deklarálását.

Globális stílusok létrehozásához importálja a CreateGlobalStyle függvényt, és deklarálja a kívánt stílusokat.

Például:

import {createGlobalStyle} tól től"stílusú összetevők";
const GlobalStyles = CreateGlobalStyle`
 @import url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


 * {
 árrés: 0;
 párnázás: 0;
 box-sizing: border-box;
 }


 body {
 háttérszín: #343434;
 betűméret: 15px;
 szín: #FFFFFF;
 betűtípus család: "Montserrat", sans-serif; 
 }
`
exportalapértelmezett GlobalStyles;

Ezután importálja a GlobalStyles összetevőt az alkalmazásösszetevőbe, és renderelje azt. Rendering a GlobalStyles komponens az alkalmazásban, a stílusokat alkalmazza az alkalmazásra.

Például így:

import Reagál tól től'reagál';
import GlobalStyles tól től'./Globális';
funkcióApp() {
Visszatérés (



 </div>
 )
}

Tovább a stílusos alkatrészekhez

Megtanulta, hogyan állíthat be, telepíthet és használhat stílusos összetevőket a React alkalmazásban. A stílusos összetevők könyvtára hatékony módja a React alkalmazás stílusának. Számos hasznos funkciót kínál, amelyek rugalmasságot és dinamikus stílust tesznek lehetővé.

A stílusos komponensekhez, például az animációkhoz rengeteg más tartozik, és a React egy nagy keretrendszer, amelyen kívül még sokat kell tanulni.