CSS-in-JS-bibliotheken zijn, net als gestileerde componenten, de laatste jaren populairder geworden. Ze kapselen CSS in tot op componentniveau en stellen u in staat JavaScript te gebruiken om herbruikbare stijlen te definiëren.
Door gestileerde componenten te gebruiken, kunt u de componentgestuurde architectuur behouden die React al versterkt. Maar de bibliotheek heeft ook nadelen.
Hoe gestileerde componenten werken
De gestileerde componenten Met de CSS-in-JS-bibliotheek kunt u CSS in uw componentbestanden schrijven. De syntaxis is hetzelfde als CSS, dus het is vrij eenvoudig op te pikken. Het is een perfecte middenweg voor JavaScript-ontwikkelaars die de neiging hebben om weg te blijven van pure CSS.
Bekijk de volgende titelcomponent die een h1-element weergeeft om te zien hoe het werkt.
const Titel = gestyled.h1`
lettertypegrootte: 1.5em;
tekst uitlijnen: midden;
kleur rood;
`;
U kunt deze component gebruiken zoals elke andere React-component.
const Thuis = () => {
opbrengst (
<Titel>Een gestileerde componentkop</Title>
)
}
Het is ook erg krachtig omdat het het gemakkelijker maakt om met rekwisieten en staat te werken.
Zo zijn de kleur en achtergrond van dit onderdeel afhankelijk van de rekwisieten.
importeren gestileerd van "gestileerde componenten";const Knop = gestileerde.knop`
opvulling: 0.8rem 1.6rem;
achtergrondkleur: ${(rekwisieten) => (rekwisieten.primair? "Purper": "wit")};
grens: 1px vast #00000;
kleur: ${(rekwisieten) => (rekwisieten.primair? "wit": "Purper")};
`;
exporterenstandaardfunctieHuis() {
opbrengst <Knop primair>primair</Button>
}
Met gestileerde componenten hoeft u de rekwisieten niet handmatig door te geven aan de CSS. Het is automatisch beschikbaar en vereenvoudigt schrijfstijlen die afhankelijk zijn van gegevens van het onderdeel.
Voordelen van het gebruik van gestileerde componenten
Hier zijn enkele voordelen van het gebruik van de bibliotheek met gestileerde componenten.
Het lost CSS-specificiteitsproblemen op
Gestileerde componenten elimineren specificiteitsproblemen omdat het CSS in een component inkapselt. Dit betekent dat u zich geen zorgen hoeft te maken over het botsen van klassennamen of dat uw gebruikersinterface een puinhoop wordt door het botsen van klassennamen.
Hiermee kunt u CSS in componenten schrijven
Zoals te zien is in het voorbeeld van een knopcomponent, kunt u met styled-componenten CSS en JS in hetzelfde bestand combineren. U hoeft dus geen apart CSS-bestand te maken of steeds van bestand naar bestand te wisselen.
Dit is een enorm voordeel bij het maken van UI-kits, omdat je alle functionaliteit van de componenten in één bestand opslaat.
Anders dan dat, CSS schrijven in componenten. Het maakt het gemakkelijker om rekwisieten en staten met stijlen te delen.
Staat typecontrole toe
Met gestileerde componenten kunt u de rekwisieten en waarden die in uw stijlen worden gebruikt, typen. U kunt bijvoorbeeld de bovenstaande knopcomponent herschrijven met TypeScript.
koppelrekwisieten{
primair: booleaans
}
const Knop = gestileerde.knop<rekwisieten>`
opvulling: 0.8rem 1.6rem;
achtergrondkleur: ${(rekwisieten) => (rekwisieten.primair? "Purper": "wit")};
grens: 1px vast #00000;
kleur: ${(rekwisieten) => (rekwisieten.primair? "wit": "Purper")};
`;
TypeScript gebruiken in de component betekent het controleren van typefouten terwijl u codeert en het verminderen van de foutopsporingstijd.
Ondersteunt out-of-the-box thema's
Een donker thema toevoegen of een ander thema voor uw toepassing kan moeilijk en tijdrovend zijn. Gestileerde componenten vereenvoudigen het proces echter. U kunt thema's aan uw app toevoegen door a. te exporteren
const Knop = gestyled.main`
achtergrondkleur: ${props => rekwisieten.thema.licht.achtergrond};
kleur: ${rekwisieten => rekwisieten.theme.light.fontColor};
`
<ThemeProvider thema={theme}>
<Knop>
Lichtknop
</Button>
</ThemeProvider>
De component ThemeProvider geeft de thema's door aan alle gestileerde componenten die het inpakt. Deze componenten kunnen vervolgens de themawaarden in hun stijlen gebruiken. In dit voorbeeld gebruikt de knop de themawaarden voor de achtergrond- en letterkleuren.
Nadelen van het gebruik van gestileerde componenten
Hoewel het gebruik van de bibliotheek met gestileerde componenten veel voordelen heeft, heeft het ook nadelen.
Het is niet framework-onafhankelijk
Het schrijven van CSS in JS betekent dat het scheiden van de twee in de toekomst moeilijk zal zijn, wat verschrikkelijk is voor de onderhoudbaarheid. Als u bijvoorbeeld ooit besluit om uw JavaScript-framework, moet u het grootste deel van uw codebase herschrijven.
Dit is tijdrovend en kostbaar. Gebruik makend van CSS-modules of een framework-onafhankelijke bibliotheek zoals emotie is meer toekomstbestendig.
Het kan moeilijk zijn om te lezen
Het kan moeilijk zijn om onderscheid te maken tussen gestileerde en React-componenten, vooral buiten een atomair ontwerpsysteem. Beschouw dit voorbeeld:
<Hoofd>
<navigatie>
<Lijstitem>
<Verbind tekst>Adopteer een huisdier</LinkText>
</ListItem>
<Lijstitem>
<Verbind tekst>Doneren</LinkText>
</ListItem>
</Nav>
<kop>Aannemen, niet doen't winkel!</Header>
<SecondaryBtn btnText="Doneren" />
</Main>
De enige manier om te weten welk onderdeel bedrijfslogica bevat, is door te controleren of het rekwisieten heeft. Bovendien, hoewel de componentnamen in dit voorbeeld beschrijvend zijn, is het nog steeds moeilijk om ze te visualiseren.
De component Koptekst kan bijvoorbeeld een kop zijn, maar tenzij u de stijlen controleert, weet u misschien nooit of het een h1, h2 of h3 is.
Sommige ontwikkelaars lossen dit probleem op door alleen de gestileerde component als wrapper te gebruiken en de semantische HTML-tags voor de elementen erin te gebruiken.
In dit voorbeeld kan de header-component een h1-tag gebruiken.
<h1>Aannemen, niet doen't winkel!</h1>
U kunt dit verder doen door de gestileerde componenten in een ander bestand te definiëren (bijv. styled.js), die u later in een React-component kunt importeren.
importeren * net zo gestyled van './gestileerd'
// gebruik styled.components
<gestileerd. Hoofd>
// code
</styled.Main>
Als u dit doet, krijgt u een duidelijk beeld van welke componenten zijn gestileerd en welke React-componenten zijn.
Gestileerde componenten worden tijdens runtime gecompileerd
Voor toepassingen die gestileerde componenten gebruiken, downloadt de browser de CSS en parseert deze met JavaScript voordat ze in de pagina worden geïnjecteerd. Dit veroorzaakt prestatieproblemen omdat de gebruiker veel JavaScript moet downloaden bij de eerste keer laden.
Statische CSS is veel sneller. Het hoeft niet te worden verwerkt voordat de browser het gebruikt om pagina's op te maken. De bibliotheek met gestileerde componenten verbetert echter met elke release. Als je je wat verminderde prestaties kunt veroorloven, ga je gang en gebruik het.
Wanneer gestileerde componenten gebruiken?
Sommige ontwikkelaars schrijven graag CSS in JS-bestanden, terwijl anderen liever aparte CSS-bestanden hebben. Hoe u ervoor kiest om CSS te schrijven, moet uiteindelijk afhangen van het project zelf en wat u of uw team leuk vindt. Gestileerde componenten zijn een goede keuze voor het bouwen van een UI-bibliotheek, omdat alles in één bestand kan staan en gemakkelijk kan worden geëxporteerd en hergebruikt.
Als je liever pure CSS schrijft, gebruik dan CSS-modules. U kunt afzonderlijke CSS-bestanden hebben en standaard worden stijlen lokaal toegepast. Welke keuze je ook maakt, gedegen kennis van CSS is essentieel.
