Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Pomocí Reactu je typické ukládat své styly do globálního souboru CSS. To může ztížit nalezení stylu pro konkrétní komponenty, zvláště když pracujete na velkém projektu. Se stylizovanými komponentami je nalezení stylu pro konkrétní komponentu snadné, protože jsou ve stejném souboru jako komponenta.

Podívejme se, jak nastavit a integrovat stylizované komponenty do vaší aplikace React.

Instalace knihovny komponent se stylem

Styled-components můžete nainstalovat spuštěním tohoto příkazu ve vašem terminálu:

npm i styled-components

Chcete-li nainstalovat stylizované komponenty pomocí příze, spusťte:

příze přidat stylizované komponenty

Vytvoření stylizované komponenty

Stylizovaná komponenta je stejně jako standardní komponenta React se styly. Existují různé klady a zápory stylizovaných komponent, které je důležité vzít v úvahu pro správné použití.

Obecná syntaxe vypadá takto:

import stylizovaný z"stylované komponenty";

konst ComponentName = stylizovaný. DOMElementTag`
 cssProperty: cssValue
`

Zde importujete stylizovaný z stylová složka knihovna. The stylizovaný function je interní metoda, která převádí kód JavaScript na skutečný CSS. The ComponentName je název stylizované komponenty. The DOMElementTag je prvek HTML/JSX, který chcete upravit, například div, span, button atd.

Chcete-li vytvořit stylizované tlačítko pomocí stylizované komponenty, musíte nejprve vytvořit komponentu React obsahující prvek tlačítka.

Jako tak:

import Reagovat z"reagovat";
funkceKnoflík() {
vrátit se (

Nyní můžete vytvořit styl pro tlačítko pomocí stylovaných komponent:

import stylizovaný z"stylované komponenty";
konst StyledButton = styled.tlačítko`
 vycpávka: 1rem 0.8rem;
 okraj-poloměr: 15px;
 barva pozadí: šedá;
 barva: #FFFFFF;
 velikost písma: 15px;
`

Když dáte vše dohromady, budete muset vyměnit knoflík značka s StyledButton komponent:

import stylizovaný z"stylované komponenty";
import Reagovat z"reagovat";
konst StyledButton = styled.tlačítko`
 vycpávka: 1rem 0.8rem;
 okraj-poloměr: 15px;
 barva pozadí: šedá;
 barva: #FFFFFF;
 velikost písma: 15px;
`
funkceKnoflík() {
vrátit se (
Vítejte!!!</StyledButton>
 )
}

Styly vnoření

Při práci se stylizovanými komponentami můžete také vnořit styly. Vnořování stylizovaných komponent je trochu podobné pomocí jazyka rozšíření SASS/SCSS. Styly můžete vnořit, pokud komponenta obsahuje více tagů prvků a chce stylovat každý tag samostatně.

Například:

import Reagovat z'reagovat';
funkceAplikace() {
vrátit se (


Stylizované komponenty</h1>




Vítejte ve styled-components</p>
 </div>
 )
}

Tento kód vytvoří komponentu obsahující h1 prvek a p živel.

Tyto prvky můžete upravit pomocí funkce vnořených stylů stylizovaných komponent:

import Reagovat z'reagovat';
import stylizovaný z'styled-components';
konst StyledApp = styled.div`
 barva: #333333;
 text-align: center;


 h1 {
 velikost písma: 32px;
 styl písma: kurzíva;
 váha písma: tučné;
 mezera mezi písmeny: 1.2rem;
 text-transform: velká písmena; 
 }


 p {
 margin-block-start: 1rem;
 velikost písma: 18px;
 }
`
funkceAplikace() {
vrátit se (

Stylizované komponenty</h1>




Vítejte ve styled-components</p>
 </StyledApp>
 )
}

Tento kód používá stylizovanou komponentu a vnořuje styl pro h1 a p značky.

Vytváření a používání proměnných

Schopnost vytvářet proměnné je pozoruhodnou vlastností knihovny stylových komponent. Tato schopnost poskytuje dynamický styl, kde můžete použít proměnné JavaScriptu k určení stylů.

Chcete-li použít proměnné v komponentách se stylem, vytvořte proměnnou a přiřaďte jí hodnotu vlastnosti CSS. Tuto proměnnou pak můžete použít přímo ve svém CSS, například:

import stylizovaný z"stylované komponenty";
konst MainColor = "Červené";


konst Nadpis = styled.h1`
 barva: ${MainColor};
`;
funkceAplikace() {
vrátit se (
 <>
Ahoj světe!</Heading>
 </>
 );
}

V bloku kódu výše je text „Ahoj světe!“ se zobrazí červenou barvou.

Všimněte si, že tento příklad jednoduše používá standardní proměnnou JavaScriptu v literálu šablony ve spojení se stylizovanou komponentou. Je to odlišný přístup od pomocí CSS proměnných.

Rozšíření stylů

Po vytvoření stylizované komponenty ji použijete. V některých situacích možná budete chtít udělat jemné rozdíly nebo přidat další styl. V případech, jako je tento, můžete rozšířit styly.

Chcete-li rozšířit styly, zabalte komponentu se stylem do styled() konstruktoru a poté zahrnout všechny další styly.

V tomto příkladu je Primární Tlačítko komponenta převezme styl komponenty Button a přidá jinou barvu pozadí, modrou.

import stylizovaný z"stylované komponenty";
import Reagovat z"reagovat";
konst Tlačítko = stylizované.tlačítko`
 vycpávka: 1rem 0.8rem;
 okraj-poloměr: 15px;
 barva pozadí: šedá;
 barva: #FFFFFF;
 velikost písma: 15px;
`


konst PrimaryButton = stylizované (tlačítko)`
 barva pozadí: modrá;
`
funkceAplikace() {
vrátit se (

Můžete také změnit značku, kterou stylizovaná komponenta vykresluje pomocí tak jako rekvizita.

The tak jako prop vám umožňuje určit základní prvek HTML/JSX, jako by se stylizovaná komponenta vykreslila.

Například:

import stylizovaný z"stylované komponenty";
import Reagovat z"reagovat";
konst Tlačítko = stylizované.tlačítko`
 vycpávka: 1rem 0.8rem;
 okraj-poloměr: 15px;
 barva pozadí: šedá;
 barva: #FFFFFF;
 velikost písma: 15px;
`
funkceAplikace() {
vrátit se (

Tento kód vykresluje Knoflík komponenta jako an A prvek, nastavení jeho href přisuzovat '#'.

Vytváření globálních stylů

Stylizované komponenty jsou obvykle omezeny na komponentu, takže vás možná zajímá, jak stylizovat aplikaci jako celek. Aplikaci můžete stylizovat pomocí globálního stylingu.

Styled-Components nabízí a vytvořit GlobalStyle funkce, která umožňuje globálně deklarovat styly. The vytvořit GlobalStyle odstraňuje omezení stylů v rozsahu komponent a umožňuje deklarovat styly, které se vztahují na každou komponentu.

Chcete-li vytvořit globální styly, importujte soubor vytvořit GlobalStyle funkce a deklarujte styly, které požadujete.

Například:

import {createGlobalStyle} z'styled-components';
konst GlobalStyles = createGlobalStyle`
 @import url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


 * {
 okraj: 0;
 vycpávka: 0;
 box-sizing: border-box;
 }


 tělo {
 barva pozadí: #343434;
 velikost písma: 15px;
 barva: #FFFFFF;
 rodina písem: 'montserrat', bezpatkové; 
 }
`
vývoznívýchozí GlobalStyles;

Poté importujete GlobalStyles komponentu do vaší komponenty aplikace a vykreslit ji. Vykreslování GlobalStyles komponenta ve vaší komponentě aplikace použije styly na vaši aplikaci.

Jako tak:

import Reagovat z'reagovat';
import GlobalStyles z'./Globální';
funkceAplikace() {
vrátit se (



 </div>
 )
}

Více ke stylizovaným komponentám

Naučili jste se, jak nastavit, nainstalovat a používat stylizované komponenty v aplikaci React. Knihovna stylových komponent je efektivní způsob úpravy stylu vaší aplikace React. Poskytuje mnoho užitečných funkcí, které umožňují flexibilitu stylingu a dynamický styling.

Stylových komponent, jako jsou animace, je mnohem víc a React je velký rámec, který se kromě toho dá ještě hodně naučit.