Als u React gebruikt, is het gebruikelijk om uw stijlen op te slaan in een globaal CSS-bestand. Dit kan het moeilijk maken om de styling voor specifieke componenten te vinden, vooral wanneer u aan een groot project werkt. Met gestileerde componenten is het gemakkelijk om de stijl voor een bepaalde component te vinden, omdat ze zich in hetzelfde bestand bevinden als de component.
Laten we eens kijken hoe u gestileerde componenten in uw React-toepassing kunt instellen en integreren.
De bibliotheek met gestileerde componenten installeren
U kunt gestileerde componenten installeren door deze opdracht in uw terminal uit te voeren:
npm i gestileerde componenten
Om gestileerde componenten met garen te installeren, voer je uit:
garen voeg gestileerde componenten toe
Een gestileerde component maken
Een gestileerde component is net als een standaard React-component, met stijlen. Er zijn verschillende
voor- en nadelen van gestileerde componenten, die belangrijk zijn om te overwegen voor correct gebruik.De algemene syntaxis ziet er als volgt uit:
importeren gestileerd van"stijl-componenten";
const Componentnaam = gestileerd. DOMElementTag`
cssEigenschap: cssValue
`
Hier importeer je gestileerd van de gestileerde component bibliotheek. De gestileerd functie is een interne methode die de JavaScript-code converteert naar daadwerkelijke CSS. De Componentnaam is de naam van de gestileerde component. De DOMElementTag is het HTML/JSX-element dat u wilt stylen, zoals div, span, button, etc.
Om een gestileerde knop te maken met behulp van een gestileerde component, maakt u eerst een React-component met een knopelement.
Zoals zo:
importeren Reageer van"Reageer";
functieKnop() {
opbrengst (
Nu kunt u een stijl voor de knop maken met behulp van gestileerde componenten:
importeren gestileerd van"stijl-componenten";
const StyledButton = gestileerde.knop`
opvulling: 1rem 0.8rem;
border-radius: 15px;
achtergrondkleur: grijs;
kleur: #FFFFFF;
lettertypegrootte: 15px;
`
Als je alles bij elkaar zet, moet je de knop tag met de Gestileerde knop bestanddeel:
importeren gestileerd van"stijl-componenten";
importeren Reageer van"Reageer";const StyledButton = gestileerde.knop`
opvulling: 1rem 0.8rem;
border-radius: 15px;
achtergrondkleur: grijs;
kleur: #FFFFFF;
lettertypegrootte: 15px;
`
functieKnop() {
opbrengst (Welkom!!!</StyledButton>
)
}
Neststijlen
U kunt ook stijlen nesten wanneer u met gestileerde componenten werkt. Het nesten van gestileerde componenten lijkt een beetje op met behulp van de SASS/SCSS-extensietaal. U kunt stijlen nesten als een component meerdere elementtags bevat en elke tag afzonderlijk wil stylen.
Bijvoorbeeld:
importeren Reageer van'Reageer';
functieapp() {
opbrengst (Gestileerde componenten</h1>
Welkom bij styled-components</p>
</div>
)
}
Deze code maakt een component met daarin een h1 onderdeel en een P element.
U kunt deze elementen stylen met behulp van de geneste stylingfunctie van gestylede componenten:
importeren Reageer van'Reageer';
importeren gestileerd van'stijl-componenten';const StyledApp = styled.div`
kleur: #333333;
tekst uitlijnen: centreren;h1 {
lettertypegrootte: 32px;
lettertypestijl: cursief;
font-weight: vet;
letterafstand: 1.2rem;
tekst-transformatie: hoofdletters;
}P {
margin-block-start: 1rem;
lettertypegrootte: 18px;
}
`
functieapp() {
opbrengst (Gestileerde componenten</h1>
Welkom bij styled-components</p>
</StyledApp>
)
}
Deze code gebruikt een gestileerde component en nestelt de styling voor de h1 En P labels.
Variabelen maken en gebruiken
De mogelijkheid om variabelen te creëren is een opmerkelijk kenmerk van de bibliotheek met gestileerde componenten. Deze mogelijkheid biedt dynamische styling waarbij u JavaScript-variabelen kunt gebruiken om stijlen te bepalen.
Om variabelen in gestileerde componenten te gebruiken, maakt u een variabele en wijst u er een CSS-eigenschapswaarde aan toe. Die variabele kun je dan direct in je CSS gebruiken, bijvoorbeeld:
importeren gestileerd van"stijl-componenten";const Hoofdkleur = "rood";
const Kop = gestileerd.h1`
kleur: ${MainColor};
`;
functieapp() {
opbrengst (
<>Hallo wereld!</Heading>
</>
);
}
In het bovenstaande codeblok staat de tekst "Hallo Wereld!” wordt weergegeven in de kleur rood.
Merk op dat dit voorbeeld gewoon een standaard JavaScript-variabele gebruikt in een letterlijke sjabloon in combinatie met de gestileerde component. Het is een andere aanpak dan CSS-variabelen gebruiken.
Uitbreiding van stijlen
Nadat u een gestileerde component hebt gemaakt, gaat u de component gebruiken. Misschien wilt u in sommige situaties subtiele verschillen maken of meer styling toevoegen. In dergelijke gevallen kunt u stijlen uitbreiden.
Om stijlen uit te breiden, wikkelt u de gestileerde component in de gestileerd() constructor en voeg vervolgens eventuele aanvullende stijlen toe.
In dit voorbeeld is de Primaire knop component erft de stijl van de knopcomponent en voegt een andere achtergrondkleur blauw toe.
importeren gestileerd van"stijl-componenten";
importeren Reageer van"Reageer";const Knop = gestileerde.knop`
opvulling: 1rem 0.8rem;
border-radius: 15px;
achtergrondkleur: grijs;
kleur: #FFFFFF;
lettertypegrootte: 15px;
`const PrimaryButton = gestileerd (knop)`
achtergrondkleur: blauw;
`
functieapp() {
opbrengst (
U kunt ook de tag wijzigen die een gestileerde component weergeeft met behulp van de als een attribuut.
De als prop stelt u in staat om het onderliggende HTML/JSX-element te specificeren waarnaar de gestileerde component zou renderen.
Bijvoorbeeld:
importeren gestileerd van"stijl-componenten";
importeren Reageer van"Reageer";const Knop = gestileerde.knop`
opvulling: 1rem 0.8rem;
border-radius: 15px;
achtergrondkleur: grijs;
kleur: #FFFFFF;
lettertypegrootte: 15px;
`
functieapp() {
opbrengst (
Deze code geeft de Knop onderdeel als een A element, het instellen van zijn href toeschrijven aan ‘#’.
Globale stijlen creëren
Gestileerde componenten zijn meestal gericht op een component, dus u vraagt zich misschien af hoe u de toepassing als geheel kunt stylen. U kunt de toepassing stylen met behulp van globale styling.
Styled-Components biedt een createGlobalStyle functie waarmee u stijlen globaal kunt declareren. De createGlobalStyle verwijdert de beperking van op componenten gebaseerde styling en stelt u in staat stijlen te declareren die van toepassing zijn op elke component.
Om globale stijlen te maken, importeert u het createGlobalStyle functie en declareer de stijlen die u nodig heeft.
Bijvoorbeeld:
importeren {createGlobalStyle} van'stijl-componenten';const GlobalStyles = creëerGlobalStyle`
@importeren url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');* {
marge: 0;
opvulling: 0;
doosmaat: randdoos;
}lichaam {
Achtergrond kleur: #343434;
lettertypegrootte: 15px;
kleur: #FFFFFF;
font-familie: 'Montserrat', schreefloos;
}
`
exporterenstandaard Wereldwijde stijlen;
Vervolgens importeer je de GlobalStyles component in uw app-component en geef deze weer. Het renderen van de GlobalStyles component in uw app-component past de stijlen toe op uw applicatie.
Zoals zo:
importeren Reageer van'Reageer';
importeren GlobalStyles van'./Globaal';
functieapp() {
opbrengst (
</div>
)
}
Meer over gestileerde componenten
U hebt geleerd hoe u gestileerde componenten in uw React-toepassing kunt instellen, installeren en gebruiken. De bibliotheek met gestileerde componenten is een efficiënte manier om uw React-toepassing te stylen. Het biedt veel handige functies die flexibiliteit in styling en dynamische styling mogelijk maken.
Er zijn nog veel meer gestileerde componenten, zoals animaties, en React is een groot raamwerk met daarnaast nog veel te leren.