Metodes vir die Stilering van React Komponente
Daar is baie verskillende maniere om React-komponente te style. Hier sal ons sommige van die basiese maniere ondersoek.
Die standaardbenadering wat ons kan toepas, soos by gewone webblad-stilering, is die gebruik van globale CSS. Hier skep ons een eksterne, algemene CSS-lêer met style. Met hierdie benadering is alle klassename in die globale naamruimte, wat kan lei tot konflikte tussen hulle. Ons kan ook baie klein CSS-lêers maak. Hierdie benadering is min doeltreffend vir die skep van groot skaleerbare toepassings.
Die volgende benadering is inlyn-stilering,
waarmee ons CSS-style inlyn kan byvoeg,
soortgelyk aan hoe dit in gewone HTML gedoen word. In
hierdie geval sal ons werk met die attribuut
style, en die nodige
CSS-eienskappe daaraan oordra. Die gebruik van sulke stilering
word as 'n slegte praktyk beskou en word slegs aanbeveel
vir die byvoeging van dinamies
berekende style tydens weergave. Hierdie
metode is goed vir vinnige prototipering
van 'n komponent se koppelvlak.
Die volgende paar metodes wat ons sal ondersoek is moderne, gewild-wordende, doeltreffende stileringsmetodes. Dit is presies die metodes wat aanbeveel word vir die stilering van groot skaleerbare React-toepassings.
Die eerste een is die gebruik van die biblioteek Styled Components, wat sjabloonstringe gebruik vir stilering. Hierdie metode laat ons toe om gewone CSS in JS-kode te skryf, en die hele funksionaliteit daarvan te gebruik.
Die tweede metode is die gebruik van CSS-modules. In hierdie geval is 'n CSS-module 'n CSS-lêer waarin alle klassename en animasies by verstek in die plaaslike naamruimte is, dit wil sê, dit is slegs beskikbaar binne die komponent wat dit gebruik.
In hierdie twee laaste metodes hoef ons nie bang te wees vir konflikte tussen klassename nie, want hulle is uniek - die konsep van 'n plaaslike naamruimte word gebruik. Ook is die noodsaaklikheid van die BEM-metodologie nie meer nodig wanneer hulle gebruik word nie.
In die volgende lesse sal ons al die hier genoemde metodes in meer besonderhede ondersoek.
