Ved at bruge React er det typisk at gemme dine styles i en global CSS-fil. Dette kan gøre det svært at finde stylingen til specifikke komponenter, især når du arbejder på et stort projekt. Med stylede komponenter er det nemt at finde stilen til en bestemt komponent, fordi de er i samme fil som komponenten.
Lad os se, hvordan du opsætter og integrerer stylede komponenter i din React-applikation.
Installation af biblioteket med stilede komponenter
Du kan installere stylede-komponenter ved at køre denne kommando i din terminal:
npm i stylede-komponenter
For at installere stylede komponenter ved hjælp af garn skal du køre:
garn tilføje stylede-komponenter
Oprettelse af en stylet komponent
En stylet komponent er ligesom en standard React-komponent med stilarter. Der er forskellige fordele og ulemper ved stylede komponenter, som er vigtige at overveje for korrekt brug.
Den generelle syntaks ser således ud:
importere stylet fra"stylede-komponenter";
konst ComponentName = stylet. DOMElementTag`
cssProperty: cssValue
`
Her importerer du stylet fra stylet-komponent bibliotek. Det stylet funktion er en intern metode, der konverterer JavaScript-koden til faktisk CSS. Det Komponentnavn er navnet på den stylede komponent. Det DOMElementTag er HTML/JSX-elementet du har tænkt dig at style, såsom div, span, knap osv.
For at oprette en stylet knap ved hjælp af en stylet komponent, skal du først oprette en React-komponent, der indeholder et knapelement.
Ligesom:
importere Reagere fra"reagere";
fungereKnap() {
Vend tilbage (
Nu kan du oprette en stil til knappen ved hjælp af stylede-komponenter:
importere stylet fra"stylede-komponenter";
konst StyledButton = styled.button`
polstring: 1rem 0.8rem;
grænse-radius: 15px;
baggrundsfarve: grå;
farve: #FFFFFF;
skriftstørrelse: 15px;
`
Når du sætter alt sammen, bliver du nødt til at udskifte knap tag med Styled Button komponent:
importere stylet fra"stylede-komponenter";
importere Reagere fra"reagere";konst StyledButton = styled.button`
polstring: 1rem 0.8rem;
grænse-radius: 15px;
baggrundsfarve: grå;
farve: #FFFFFF;
skriftstørrelse: 15px;
`
fungereKnap() {
Vend tilbage (Velkommen!!!</StyledButton>
)
}
Nesting Styles
Du kan også indlejre stilarter, når du arbejder med stylede komponenter. Nesting stylede komponenter er lidt ligesom ved at bruge SASS/SCSS Extension Language. Du kan indlejre typografier, hvis en komponent indeholder flere element-tags og ønsker at style hvert tag individuelt.
For eksempel:
importere Reagere fra'reagere';
fungereApp() {
Vend tilbage (Stylede komponenter</h1>
Velkommen til stylede-komponenter</p>
</div>
)
}
Denne kode opretter en komponent, der indeholder en h1 element og et s element.
Du kan style disse elementer ved hjælp af den indlejrede styling-funktion i stylede komponenter:
importere Reagere fra'reagere';
importere stylet fra'stylede-komponenter';konst StyledApp = styled.div`
farve: #333333;
tekst-align: center;h1 {
skriftstørrelse: 32px;
skrifttype: kursiv;
font-weight: fed;
bogstavmellemrum: 1.2rem;
tekst-transform: store bogstaver;
}p {
margin-blok-start: 1rem;
skriftstørrelse: 18px;
}
`
fungereApp() {
Vend tilbage (Stylede komponenter</h1>
Velkommen til stylede-komponenter</p>
</StyledApp>
)
}
Denne kode bruger en stylet komponent og indlejrer stylingen for h1 og s tags.
Oprettelse og brug af variabler
Evnen til at skabe variabler er et bemærkelsesværdigt træk ved biblioteket med stilede komponenter. Denne evne giver dynamisk stil, hvor du kan bruge JavaScript-variable til at bestemme stilarter.
For at bruge variabler i stilede komponenter skal du oprette en variabel og tildele en CSS-egenskabsværdi til den. Du kan derefter bruge den variabel direkte i din CSS, for eksempel:
importere stylet fra"stylede-komponenter";konst Hovedfarve = "rød";
konst Overskrift = stylet.h1`
farve: ${MainColor};
`;
fungereApp() {
Vend tilbage (
<>Hej verden!</Heading>
</>
);
}
I kodeblokken ovenfor står teksten "Hej Verden!” vises i rød farve.
Bemærk, at dette eksempel blot bruger en standard JavaScript-variabel i en skabelonliteral sammen med den stilede komponent. Det er en anden tilgang fra ved hjælp af CSS-variabler.
Udvidelse af stilarter
Når du har oprettet en stylet komponent, vil du bruge komponenten. Du vil måske lave subtile forskelle eller tilføje mere styling i nogle situationer. I tilfælde som dette kan du udvide styles.
For at udvide stilarter pakker du den stylede komponent ind i stylet() konstruktør og medtag derefter eventuelle yderligere stilarter.
I dette eksempel er Primær knap komponenten arver knapkomponentens stil og tilføjer en anden baggrundsfarve af blå.
importere stylet fra"stylede-komponenter";
importere Reagere fra"reagere";konst Knap = stylet.knap`
polstring: 1rem 0.8rem;
grænse-radius: 15px;
baggrundsfarve: grå;
farve: #FFFFFF;
skriftstørrelse: 15px;
`konst PrimaryButton = stylet (knap)`
baggrundsfarve: blå;
`
fungereApp() {
Vend tilbage (
Du kan også ændre det tag, en stylet komponent gengiver ved hjælp af som en rekvisit.
Det som prop giver dig mulighed for at angive det underliggende HTML/JSX-element, som den stylede komponent vil gengives som.
For eksempel:
importere stylet fra"stylede-komponenter";
importere Reagere fra"reagere";konst Knap = stylet.knap`
polstring: 1rem 0.8rem;
grænse-radius: 15px;
baggrundsfarve: grå;
farve: #FFFFFF;
skriftstørrelse: 15px;
`
fungereApp() {
Vend tilbage (
Denne kode gengiver Knap komponent som en -en element, indstiller dens href attribut til '#'.
Oprettelse af globale stilarter
Stylede komponenter er normalt tilpasset til en komponent, så du undrer dig måske over, hvordan du skal style applikationen som helhed. Du kan style applikationen ved hjælp af global styling.
Styled-Components tilbyder en skabe GlobalStyle funktion, der giver dig mulighed for at erklære stilarter globalt. Det skabe GlobalStyle fjerner begrænsningen af komponent-omfanget styling og giver dig mulighed for at erklære typografier, der gælder for hver komponent.
For at oprette globale stilarter importerer du skabe GlobalStyle funktion og erklære de stilarter, du har brug for.
For eksempel:
importere {createGlobalStyle} fra'stylede-komponenter';konst GlobalStyles = createGlobalStyle`
@importere url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');* {
margin: 0;
polstring: 0;
box-sizing: border-box;
}krop {
baggrundsfarve: #343434;
skriftstørrelse: 15px;
farve: #FFFFFF;
skrifttype-familie: 'Montserrat', sans serif;
}
`
eksportStandard GlobalStyles;
Så importerer du GlobalStyles komponent ind i din app-komponent og gengiver den. Gengivelse af GlobalStyles komponent i din app-komponent vil anvende stilene på din applikation.
Ligesom:
importere Reagere fra'reagere';
importere GlobalStyles fra'./Global';
fungereApp() {
Vend tilbage (
</div>
)
}
Mere til stilede komponenter
Du har lært, hvordan du opsætter, installerer og bruger stilede komponenter i din React-applikation. Biblioteket med stylede komponenter er en effektiv måde at style din React-applikation på. Det giver mange nyttige funktioner, der giver mulighed for fleksibilitet i styling og dynamisk styling.
Der er meget mere til stylede komponenter, såsom animationer, og React er en stor ramme med meget at lære udover det.
