Styled Components refereert hier niet naar de verzamelterm van gestijlde componenten, maar eerder naar een library die ons toelaat CSS in JavaScript te schrijven. Styled Components is dus een soort bibliotheek waarmee we CSS code kunnen integreren in JavaScript, om op die manier componenten te stijlen.
Het ontstaan van Styled Components is daarom ook direct te heleiden naar de nood aan een goede en duidelijke manier om CSS te definiëren naast bestaande React componenten. Het doel was niet alleen het gebruiksgemak voor de gebruiker te maximaliseren, maar ook de developer experience.
De primaire manier van werken met React is het definiëren van individuele componenten die samen fungeren als één geheel, namelijk de applicatie of website. Dit geldt trouwens ook voor Vue, Angular en andere fameworks, maar de functionaliteit wordt in kleinere stukken verdeeld om zo modulair mogelijk te kunnen werken. Dit optimaliseert het testen, updaten, optimaliseren en debuggen van de code. Bovendien kunnen meerdere mensen gemakkelijk kleinere taken opnemen en simultaan aan één project werken. Ieder aan verschillende componenten bijvoorbeeld.
Waar React, en meer specifiek JavaScript, de functionaliteit van de applicatie bepaalt, hebben we nog altijd nood aan CSS om deze componenten te stijlen. We zouden gewoon CSS kunnen gebruiken, maar in een grotere applicatie merk je al snel zware nadelen. We kunnen gebruik maken van bekende frameworks zoals Sass om onze bestanden te scheiden van elkaar en leuke extra’s zoals mixins en functies te kunnen gebruiken.
Wanneer je een functionele component aanmaakt in React kan je de stijl meedefiniëren in dat bestand. Hieronder vind je een zeer simpel voorbeeld waar we twee titels (h1 tags) renderen vanuit een component. We geven de tweede titel een stijl mee door er een Styled Component van te maken.
Hier zien we dat de tag die we gebruikten, vervangen is door een “geneste” component met een unieke naam. Je kan dit direct merken omdat de naam begint met een hoofdletter. We kunnen zelf kiezen welk soort tag gerenderd moet worden door dit mee te geven in het Styled Component. In dit geval opnieuw een h1.
In complexere scenario’s kunnen we deze stijlen afzonderen in een apart bestand, dicht bij de component zelf om onze code proper en schaalbaar te maken. De kracht van CSS op deze manier in JavaScript te schrijven is dat we op eigenschappen kunnen checken en aan de hand daarvan bepaalde stijlen weergeven.
Hieronder kan je een voorbeeldje vinden van een knop component dat een reeks standaardstijlen gedefinieerd heeft. Als we de eigenschap “primary” meegeven, krijgt de knop de primaire kleur van ons project. We voegen geen aparte klasse hiervoor toe aan de CSS, maar deze gaat dynamisch die stijl toekennen waar nodig. Dit heeft enkele voordelen die we straks in kaart brengen.
Is het gebruik van Styled Components interessant voor jou? Wij zetten de pro's en cons op een rijtje.
Voordelen:
De nadelen van Styled Components:
Het is geen basis functionaliteit in de meeste IDE’s, dus je installeert best een plugin of extensie.
Styled Components is een sterke keuze voor applicaties of websites die eerder een grote schaal hebben en waar er potentieel is voor verdere groei. Waar performantie ook een zeer belangrijke rol speelt en het team een goede kennis of ervaring heeft met JavaScript.
Altijd al willen weten waar we ons allemaal mee bezig houden doorheen het jaar? Schrijf je dan nu in voor onze nieuwsbrief en krijg al ons nieuws, vers van de pers.
