Pomocou Reactu je typické ukladanie štýlov do globálneho súboru CSS. To môže sťažiť nájdenie štýlu pre konkrétne komponenty, najmä keď pracujete na veľkom projekte. So štylizovanými komponentmi je nájdenie štýlu pre konkrétny komponent jednoduché, pretože sú v rovnakom súbore ako komponent.
Pozrime sa, ako nastaviť a integrovať štylizované komponenty do vašej aplikácie React.
Inštalácia knižnice štylizovaných komponentov
Komponenty so štýlom môžete nainštalovať spustením tohto príkazu v termináli:
npm i štylizované-komponenty
Ak chcete nainštalovať štylizované komponenty pomocou priadze, spustite:
priadza pridať štylizované-komponenty
Vytvorenie štylizovaného komponentu
Štylizovaný komponent je rovnako ako štandardný komponent React so štýlmi. Existujú rôzne výhody a nevýhody štýlových komponentov, ktoré je dôležité zvážiť pre správne používanie.
Všeobecná syntax vyzerá takto:
importovať štylizované od"štýlové komponenty";
konšt ComponentName = štylizovaný. DOMElementTag`
cssProperty: cssValue
`
Tu importujete štylizované z štylizovaný komponent knižnica. The štylizované funkcia je interná metóda, ktorá konvertuje kód JavaScript na skutočný CSS. The ComponentName je názov štylizovaného komponentu. The DOMElementTag je prvok HTML/JSX, ktorý chcete upraviť, napríklad div, span, button atď.
Ak chcete vytvoriť tlačidlo so štýlom pomocou komponentu so štýlom, najprv by ste vytvorili komponent React obsahujúci prvok tlačidla.
Ako:
importovať Reagovať od"reagovať";
funkciuTlačidlo() {
vrátiť (
Teraz môžete vytvoriť štýl pre tlačidlo pomocou komponentov štýlu:
importovať štylizované od"štýlové komponenty";
konšt StyledButton = štylizované.tlačidlo`
vypchávka: 1rem 0.8rem;
hraničný polomer: 15px;
farba pozadia: šedá;
farba: #FFFFFF;
veľkosť písma: 15px;
`
Keď dáte všetko dohromady, budete musieť vymeniť tlačidlo tag s StyledButton komponent:
importovať štylizované od"štýlové komponenty";
importovať Reagovať od"reagovať";konšt StyledButton = štylizované.tlačidlo`
vypchávka: 1rem 0.8rem;
hraničný polomer: 15px;
farba pozadia: šedá;
farba: #FFFFFF;
veľkosť písma: 15px;
`
funkciuTlačidlo() {
vrátiť (Vitajte!!!</StyledButton>
)
}
Štýly hniezdenia
Štýly môžete vnoriť aj pri práci so štylizovanými komponentmi. Hniezdenie štylizovaných komponentov je trochu podobné pomocou jazyka rozšírenia SASS/SCSS. Štýly môžete vnoriť, ak komponent obsahuje viacero značiek prvkov a chce štýl každej značky upraviť samostatne.
Napríklad:
importovať Reagovať od'reagovať';
funkciuApp() {
vrátiť (Štýlové komponenty</h1>
Vitajte v štýlových komponentoch</p>
</div>
)
}
Tento kód vytvorí komponent obsahujúci príponu h1 prvok a a p element.
Tieto prvky môžete upraviť pomocou funkcie vnoreného štýlu štylizovaných komponentov:
importovať Reagovať od'reagovať';
importovať štylizované od„styled-components“;konšt StyledApp = styled.div`
farba: #333333;
text-align: center;h1 {
veľkosť písma: 32px;
štýl písma: kurzíva;
font-weight: bold;
medzera medzi písmenami: 1.2rem;
text-transform: veľké písmená;
}p {
margin-block-start: 1rem;
veľkosť písma: 18px;
}
`
funkciuApp() {
vrátiť (Štýlové komponenty</h1>
Vitajte v štýlových komponentoch</p>
</StyledApp>
)
}
Tento kód používa štylizovaný komponent a vnoruje štýl pre h1 a p značky.
Vytváranie a používanie premenných
Schopnosť vytvárať premenné je pozoruhodnou vlastnosťou knižnice štylizovaných komponentov. Táto schopnosť poskytuje dynamický štýl, kde môžete použiť premenné jazyka JavaScript na určenie štýlov.
Ak chcete použiť premenné v komponentoch so štýlom, vytvorte premennú a priraďte jej hodnotu vlastnosti CSS. Túto premennú potom môžete použiť priamo vo svojom CSS, napríklad:
importovať štylizované od"štýlové komponenty";konšt Hlavná farba = "červená";
konšt Nadpis = štylizovaný.h1`
farba: ${MainColor};
`;
funkciuApp() {
vrátiť (
<>Ahoj Svet!</Heading>
</>
);
}
Vo vyššie uvedenom bloku kódu je text „Ahoj svet!“ sa zobrazí červenou farbou.
Všimnite si, že tento príklad jednoducho používa štandardnú premennú jazyka JavaScript v literáli šablóny v spojení so štylizovaným komponentom. Je to odlišný prístup od pomocou CSS premenných.
Rozširujúce štýly
Po vytvorení štylizovaného komponentu ho použijete. V niektorých situáciách možno budete chcieť urobiť jemné rozdiely alebo pridať viac štýlu. V takýchto prípadoch môžete štýly rozšíriť.
Ak chcete rozšíriť štýly, zabalíte štylizovaný komponent do štylizovaný() konštruktor a potom zahrňte všetky ďalšie štýly.
V tomto príklade Primárne tlačidlo komponent prevezme štýl komponentu Button a pridá inú farbu pozadia – modrú.
importovať štylizované od"štýlové komponenty";
importovať Reagovať od"reagovať";konšt Tlačidlo = štylizované.tlačidlo`
vypchávka: 1rem 0.8rem;
hraničný polomer: 15px;
farba pozadia: šedá;
farba: #FFFFFF;
veľkosť písma: 15px;
`konšt PrimaryButton = štýlové (tlačidlo)`
farba pozadia: modrá;
`
funkciuApp() {
vrátiť (
Môžete tiež zmeniť značku, ktorú štylizovaný komponent vykresľuje pomocou ako rekvizita.
The ako prop vám umožňuje určiť základný prvok HTML/JSX, ako by sa vykreslil štylizovaný komponent.
Napríklad:
importovať štylizované od"štýlové komponenty";
importovať Reagovať od"reagovať";konšt Tlačidlo = štylizované.tlačidlo`
vypchávka: 1rem 0.8rem;
hraničný polomer: 15px;
farba pozadia: šedá;
farba: #FFFFFF;
veľkosť písma: 15px;
`
funkciuApp() {
vrátiť (
Tento kód vykresľuje Tlačidlo komponent ako an a prvok, nastavenie jeho href atribút „#“.
Vytváranie globálnych štýlov
Štylizované komponenty sa zvyčajne vzťahujú na komponent, takže by vás mohlo zaujímať, ako upraviť štýl aplikácie ako celku. Aplikáciu môžete upraviť pomocou globálneho štýlu.
Styled-Components ponúka a vytvoriť globálny štýl funkcia, ktorá vám umožňuje globálne deklarovať štýly. The vytvoriť globálny štýl odstraňuje obmedzenie štýlu v rozsahu komponentov a umožňuje vám deklarovať štýly, ktoré sa vzťahujú na každý komponent.
Ak chcete vytvoriť globálne štýly, importujte súbor vytvoriť globálny štýl funkciu a deklarovať štýly, ktoré požadujete.
Napríklad:
importovať {createGlobalStyle} od„styled-components“;konšt GlobalStyles = createGlobalStyle`
@importovať url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');* {
okraj: 0;
vypchávka: 0;
box-sizing: border-box;
}telo {
farba pozadia: #343434;
veľkosť písma: 15px;
farba: #FFFFFF;
rodina písiem: "Montserrat", bezpätkové;
}
`
exportpredvolená GlobalStyles;
Potom importujete GlobalStyles komponent do vašej aplikácie a vykreslite ho. Vykresľovanie GlobalStyles v komponente vašej aplikácie použije štýly na vašu aplikáciu.
Ako:
importovať Reagovať od'reagovať';
importovať GlobalStyles od'./Global';
funkciuApp() {
vrátiť (
</div>
)
}
Viac k štylizovaným komponentom
Naučili ste sa, ako nastaviť, nainštalovať a používať štýlové komponenty v aplikácii React. Knižnica štylizovaných komponentov predstavuje efektívny spôsob úpravy vašej aplikácie React. Poskytuje mnoho užitočných funkcií, ktoré umožňujú flexibilitu pri stylingu a dynamický styling.
Štýlových komponentov, ako sú animácie, je oveľa viac a React je veľký rámec, ktorý sa okrem toho dá veľa naučiť.