Med React är det typiskt att spara dina stilar i en global CSS-fil. Detta kan göra det svårt att hitta stylingen för specifika komponenter, särskilt när du arbetar med ett stort projekt. Med formaterade komponenter är det lätt att hitta stilen för en viss komponent eftersom de finns i samma fil som komponenten.
Låt oss se hur du ställer in och integrerar utformade komponenter i din React-applikation.
Installera biblioteket med formaterade komponenter
Du kan installera stiliserade komponenter genom att köra det här kommandot i din terminal:
npm i stilade-komponenter
För att installera stylade komponenter med garn, kör:
garn lägga till stilade komponenter
Skapa en formaterad komponent
En formaterad komponent är precis som en standard React-komponent, med stilar. Det finns olika för- och nackdelar med stiliserade komponenter, som är viktiga att tänka på för korrekt användning.
Den allmänna syntaxen ser ut så här:
importera stylad från"stilade komponenter";
konst ComponentName = formaterad. DOMElementTag`
cssProperty: cssValue
`
Här importerar du stylad från stil-komponent bibliotek. De stylad funktion är en intern metod som konverterar JavaScript-koden till faktisk CSS. De Komponentnamn är namnet på den formaterade komponenten. De DOMElementTag är HTML/JSX-elementet du tänker stil, såsom div, span, button, etc.
För att skapa en formaterad knapp med hjälp av en formaterad komponent, skulle du först skapa en React-komponent som innehåller ett knappelement.
Såhär:
importera Reagera från"reagera";
fungeraKnapp() {
lämna tillbaka (
Nu kan du skapa en stil för knappen med hjälp av stilade komponenter:
importera stylad från"stilade komponenter";
konst StyledButton = styled.button`
stoppning: 1rem 0.8rem;
gränsradie: 15px;
bakgrundsfärg: grå;
färg: #FFFFFF;
textstorlek: 15px;
`
Om du sätter ihop allt måste du byta ut knapp tagga med Styled Button komponent:
importera stylad från"stilade komponenter";
importera Reagera från"reagera";konst StyledButton = styled.button`
stoppning: 1rem 0.8rem;
gränsradie: 15px;
bakgrundsfärg: grå;
färg: #FFFFFF;
textstorlek: 15px;
`
fungeraKnapp() {
lämna tillbaka (Välkommen!!!</StyledButton>
)
}
Häckande stilar
Du kan också kapsla stilar när du arbetar med formaterade komponenter. Häckande utformade komponenter är lite som använda SASS/SCSS Extension Language. Du kan kapsla formatmallar om en komponent innehåller flera elementtaggar och vill utforma varje tagg individuellt.
Till exempel:
importera Reagera från'reagera';
fungeraApp() {
lämna tillbaka (Stiliserade komponenter</h1>
Välkommen till styled-components</p>
</div>
)
}
Denna kod skapar en komponent som innehåller en h1 element och a sid element.
Du kan styla dessa element med hjälp av den kapslade stilfunktionen i formaterade komponenter:
importera Reagera från'reagera';
importera stylad från"stilade komponenter";konst StyledApp = styled.div`
Färg: #333333;
text-align: center;h1 {
textstorlek: 32px;
teckensnittsstil: kursiv;
font-weight: fet;
teckenavstånd: 1.2rem;
text-transform: versaler;
}p {
marginal-block-start: 1rem;
textstorlek: 18px;
}
`
fungeraApp() {
lämna tillbaka (Stiliserade komponenter</h1>
Välkommen till styled-components</p>
</StyledApp>
)
}
Den här koden använder en formaterad komponent och kapslar stylingen för h1 och sid taggar.
Skapa och använda variabler
Möjligheten att skapa variabler är en anmärkningsvärd egenskap hos biblioteket med formaterade komponenter. Denna förmåga ger dynamisk stil där du kan använda JavaScript-variabler för att bestämma stilar.
Om du vill använda variabler i formaterade komponenter skapar du en variabel och tilldelar den ett CSS-egenskapsvärde. Du kan sedan använda den variabeln direkt i din CSS, till exempel:
importera stylad från"stilade komponenter";konst Huvudfärg = "röd";
konst Rubrik = styled.h1`
färg: ${MainColor};
`;
fungeraApp() {
lämna tillbaka (
<>Hej världen!</Heading>
</>
);
}
I kodblocket ovan, texten "Hej världen!” visas i röd färg.
Observera att det här exemplet helt enkelt använder en standard JavaScript-variabel i en mallliteral i kombination med den formaterade komponenten. Det är ett annat förhållningssätt från använda CSS-variabler.
Utöka stilar
När du har skapat en formaterad komponent kommer du att använda komponenten. Du kanske vill göra subtila skillnader eller lägga till mer styling i vissa situationer. I sådana här fall kan du utöka stilar.
För att utöka stilar lindar du in den formaterade komponenten i styled() konstruktor och inkludera sedan eventuella ytterligare stilar.
I det här exemplet är Primärknapp komponent ärver utformningen av Button-komponenten och lägger till en annan bakgrundsfärg av blått.
importera stylad från"stilade komponenter";
importera Reagera från"reagera";konst Knapp = styled.button`
stoppning: 1rem 0.8rem;
gränsradie: 15px;
bakgrundsfärg: grå;
färg: #FFFFFF;
textstorlek: 15px;
`konst PrimaryButton = formaterad (Button)`
bakgrundsfärg: blå;
`
fungeraApp() {
lämna tillbaka (
Du kan också ändra taggen som en formaterad komponent renderar med hjälp av som en rekvisita.
De som prop låter dig ange det underliggande HTML/JSX-elementet som den formaterade komponenten skulle rendera som.
Till exempel:
importera stylad från"stilade komponenter";
importera Reagera från"reagera";konst Knapp = styled.button`
stoppning: 1rem 0.8rem;
gränsradie: 15px;
bakgrundsfärg: grå;
färg: #FFFFFF;
textstorlek: 15px;
`
fungeraApp() {
lämna tillbaka (
Denna kod återger Knapp komponent som en a element, ställa in dess href tillskriva '#'.
Skapa globala stilar
Stiliserade komponenter är vanligtvis anpassade till en komponent, så du kanske undrar hur du utformar applikationen som helhet. Du kan styla applikationen med hjälp av global styling.
Styled-Components erbjuder en skapa GlobalStyle funktion som gör att du kan deklarera stilar globalt. De skapa GlobalStyle tar bort begränsningen av komponentomfattad stil och låter dig deklarera stilar som gäller för varje komponent.
För att skapa globala stilar importerar du skapa GlobalStyle funktion och deklarera de stilar du behöver.
Till exempel:
importera {createGlobalStyle} från"stilade komponenter";konst GlobalStyles = createGlobalStyle`
@importera url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');* {
marginal: 0;
stoppning: 0;
box-storlek: border-box;
}kropp {
bakgrundsfärg: #343434;
textstorlek: 15px;
färg: #FFFFFF;
typsnittsfamilj: "Montserrat", sans serif;
}
`
exporterastandard GlobalStyles;
Sedan importerar du GlobalStyles komponent i din appkomponent och rendera den. Rendering av GlobalStyles komponenten i din appkomponent kommer att tillämpa stilarna på din applikation.
Såhär:
importera Reagera från'reagera';
importera GlobalStyles från'./Global';
fungeraApp() {
lämna tillbaka (
</div>
)
}
Mer om stilade komponenter
Du har lärt dig hur du ställer in, installerar och använder stiliserade komponenter i din React-applikation. Biblioteket med stilade komponenter är ett effektivt sätt att styla din React-applikation. Det ger många användbara funktioner som möjliggör flexibilitet i styling och dynamisk styling.
Det finns mycket mer till stiliserade komponenter, som animationer, och React är ett stort ramverk med mycket att lära utöver det.
