Ved å bruke React er det typisk å lagre stilene dine i en global CSS-fil. Dette kan gjøre det vanskelig å finne stylingen for spesifikke komponenter, spesielt når du jobber med et stort prosjekt. Med stylede komponenter er det enkelt å finne stilen for en bestemt komponent fordi de er i samme fil som komponenten.

La oss se hvordan du setter opp og integrerer stylede komponenter i React-applikasjonen din.

Installere biblioteket med stilede komponenter

Du kan installere stilede komponenter ved å kjøre denne kommandoen i terminalen din:

npm i stylede-komponenter

For å installere stilede komponenter ved hjelp av garn, kjør:

garn legge til stylede-komponenter

Opprette en stilet komponent

En stylet komponent er akkurat som en standard React-komponent, med stiler. Det finnes ulike fordeler og ulemper med stylede komponenter, som er viktig å vurdere for riktig bruk.

Den generelle syntaksen ser slik ut:

import stylet fra"stilte komponenter";

konst ComponentName = stylet. DOMElementTag`
 cssProperty: cssValue
`

Her importerer du stylet fra stylet-komponent bibliotek. De stylet funksjon er en intern metode som konverterer JavaScript-koden til faktisk CSS. De Komponentnavn er navnet på den stilede komponenten. De DOMElementTag er HTML/JSX-elementet du har tenkt å style, for eksempel div, span, button, etc.

For å lage en stylet knapp ved hjelp av en stylet komponent, må du først lage en React-komponent som inneholder et knappeelement.

Som så:

import Reagere fra"reagere";
funksjonKnapp() {
komme tilbake (
Velkommen!!!</button>
 )
}

Nå kan du lage en stil for knappen ved å bruke stilede komponenter:

import stylet fra"stilte komponenter";
konst StyledButton = styled.button`
 polstring: 1rem 0.8rem;
 border-radius: 15px;
 bakgrunnsfarge: grå;
 farge: #FFFFFF;
 skriftstørrelse: 15px;
`

Setter du alt sammen, må du erstatte knapp merke med Styled Button komponent:

import stylet fra"stilte komponenter";
import Reagere fra"reagere";
konst StyledButton = styled.button`
 polstring: 1rem 0.8rem;
 border-radius: 15px;
 bakgrunnsfarge: grå;
 farge: #FFFFFF;
 skriftstørrelse: 15px;
`
funksjonKnapp() {
komme tilbake (
Velkommen!!!</StyledButton>
 )
}

Hekkestiler

Du kan også legge stiler når du arbeider med stilede komponenter. Nesting stylet komponenter er litt som ved å bruke SASS/SCSS Extension Language. Du kan legge stiler hvis en komponent inneholder flere elementkoder og ønsker å style hver tag individuelt.

For eksempel:

import Reagere fra'reagere';
funksjonApp() {
komme tilbake (


Stylede komponenter</h1>


Velkommen til stylede-komponenter</p>
 </div>
 )
}

Denne koden lager en komponent som inneholder en h1 element og en s element.

Du kan style disse elementene ved å bruke den nestede stilfunksjonen til stylede komponenter:

import Reagere fra'reagere';
import stylet fra"stilte komponenter";
konst StyledApp = styled.div`
 farge: #333333;
 tekst-align: center;
 h1 {
 skriftstørrelse: 32px;
 skriftstil: kursiv;
 font-weight: fet;
 avstand mellom bokstavene: 1.2rem;
 tekst-transform: store bokstaver; 
 }
 p {
 margin-block-start: 1rem;
 skriftstørrelse: 18px;
 }
`
funksjonApp() {
komme tilbake (

Stylede komponenter</h1>


Velkommen til stylede-komponenter</p>
 </StyledApp>
 )
}

Denne koden bruker en stylet komponent og legger inn stylingen for h1 og s tagger.

Opprette og bruke variabler

Muligheten til å lage variabler er en bemerkelsesverdig egenskap ved biblioteket med stilede komponenter. Denne muligheten gir dynamisk stil der du kan bruke JavaScript-variabler til å bestemme stiler.

For å bruke variabler i stilede komponenter, opprette en variabel og tilordne en CSS-egenskapsverdi til den. Du kan deretter bruke den variabelen direkte i CSS, for eksempel:

import stylet fra"stilte komponenter";
konst Hovedfarge = "rød";
konst Overskrift = stylet.h1`
 farge: ${MainColor};
`;
funksjonApp() {
komme tilbake (
 <>
Hei verden!</Heading>
 </>
 );
}

I kodeblokken ovenfor, teksten "Hei Verden!" vises i rød farge.

Merk at dette eksemplet ganske enkelt bruker en standard JavaScript-variabel i en mal-literal i forbindelse med den stilede komponenten. Det er en annen tilnærming fra ved hjelp av CSS-variabler.

Utvide stiler

Etter å ha opprettet en stylet komponent, vil du bruke komponenten. Det kan være lurt å gjøre subtile forskjeller eller legge til mer styling i enkelte situasjoner. I tilfeller som dette kan du utvide stiler.

For å utvide stiler, pakker du den stilede komponenten inn i stylet() konstruktør og ta med eventuelle tilleggsstiler.

I dette eksemplet er Primærknapp komponenten arver stilen til Button-komponenten og legger til en annen bakgrunnsfarge av blått.

import stylet fra"stilte komponenter";
import Reagere fra"reagere";
konst Knapp = stylet.knapp`
 polstring: 1rem 0.8rem;
 border-radius: 15px;
 bakgrunnsfarge: grå;
 farge: #FFFFFF;
 skriftstørrelse: 15px;
`
konst PrimaryButton = stylet (knapp)`
 bakgrunnsfarge: blå;
`
funksjonApp() {
komme tilbake (
Velkommen</Button>
Hei!</PrimaryButton>
 )
}

Du kan også endre taggen en stylet komponent gjengir ved å bruke som en rekvisitt.

De som prop lar deg spesifisere det underliggende HTML/JSX-elementet som den stilede komponenten vil gjengi som.

For eksempel:

import stylet fra"stilte komponenter";
import Reagere fra"reagere";
konst Knapp = stylet.knapp`
 polstring: 1rem 0.8rem;
 border-radius: 15px;
 bakgrunnsfarge: grå;
 farge: #FFFFFF;
 skriftstørrelse: 15px;
`
funksjonApp() {
komme tilbake (
som='en' href='#'>Velkommen</Button>
 )
}

Denne koden gjengir Knapp komponent som en en element, sette sin href tilskrive '#'.

Opprette globale stiler

Stylede komponenter er vanligvis tilpasset en komponent, så du lurer kanskje på hvordan du skal style applikasjonen som helhet. Du kan style applikasjonen med bruk av global styling.

Styled-Components tilbyr en lage GlobalStyle funksjon som lar deg deklarere stiler globalt. De lage GlobalStyle fjerner begrensningen med komponentomfanget stil og lar deg deklarere stiler som gjelder for hver komponent.

For å lage globale stiler, importerer du lage GlobalStyle funksjon og erklær stilene du trenger.

For eksempel:

import {createGlobalStyle} fra"stilte komponenter";
konst GlobalStyles = createGlobalStyle`
 @import url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 * {
 margin: 0;
 polstring: 0;
 boksstørrelse: border-box;
 }
 kropp {
 bakgrunnsfarge: #343434;
 skriftstørrelse: 15px;
 farge: #FFFFFF;
 font-familie: 'Montserrat', sans serif; 
 }
`
eksportmisligholde GlobalStyles;

Deretter importerer du GlobalStyles komponent inn i appkomponenten din og gjengi den. Gjengivelse av GlobalStyles komponenten i appkomponenten din vil bruke stilene på applikasjonen din.

Som så:

import Reagere fra'reagere';
import GlobalStyles fra'./Global';
funksjonApp() {
komme tilbake (



 </div>
 )
}

Mer til stilede komponenter

Du har lært hvordan du setter opp, installerer og bruker stilede komponenter i React-applikasjonen din. Biblioteket med stylede komponenter er en effektiv måte å style React-applikasjonen din på. Den gir mange nyttige funksjoner som gir fleksibilitet i styling og dynamisk styling.

Det er mye mer til stilede komponenter, for eksempel animasjoner, og React er et stort rammeverk med mye å lære i tillegg.