Manieren om React componenten te stijlen
Er bestaan veel verschillende manieren om React componenten te stijlen. Hier bekijken we enkele basis manieren.
De standaard aanpak, die we kunnen toepassen, net zoals bij gewone webpagina stijling - is het gebruik van globale CSS. Hierbij creëren we één extern, gemeenschappelijk CSS bestand met stijlen. Bij deze aanpak bevinden alle klassennamen zich in de globale naamruimte, wat kan leiden tot conflicten tussen hen. Ook kan men veel kleine CSS bestanden maken. Deze aanpak is weinig effectief bij het creëren van grote schaalbare applicaties.
De volgende aanpak - inline stijling,
door deze te gebruiken, kunnen we CSS stijlen inline toevoegen,
vergelijkbaar met hoe het in gewone HTML wordt gedaan. In
dit geval werken we met het attribuut
style, waarbij we de benodigde
CSS eigenschappen doorgeven. Het gebruik van solche stijling
wordt als een slechte gewoonte beschouwd en wordt
alleen aanbevolen voor het toevoegen van dynamisch
berekende stijlen tijdens het renderen. Deze
methode is goed voor het snel prototyperen
van de interface van een individuele component.
Het volgende paar methoden dat we zullen bekijken - zijn moderne, aan populariteit winnende, effectieve manieren van stijlen. Dit zijn precies de methoden die worden aanbevolen voor het stijlen van grote schaalbare React applicaties.
De eerste daarvan is het toepassen van de bibliotheek Styled Components, die voor stijling gebruikmaakt van template strings. Deze methode stelt ons in staat om gewone CSS in JS code te schrijven, waarbij we alle functionaliteit ervan kunnen gebruiken.
De tweede methode - het toepassen van CSS modules. In dit geval is een CSS module een CSS bestand waarin standaard alle klassennamen en animaties zich in een lokale naamruimte bevinden, dat wil zeggen, ze zijn alleen toegankelijk binnen de component die het gebruikt.
Bij deze twee laatste methoden hoeven we niet bang te zijn voor conflicten tussen klassennamen, omdat ze uniek zijn - het concept van een lokale naamruimte wordt gebruikt. Ook is bij het gebruik ervan de noodzaak voor de BEM methodologie overbodig.
In de volgende lessen zullen we alle hier genoemde methoden in detail bekijken.
