Reacti komponentide stiilimise viisid

On palju erinevaid viise Reacti komponentide stiilimiseks. Siin vaatleme mõnda põhilist neist.

Standardne lähenemine, mida saame rakendada, nagu tavalise veebilehe stiilimisel - see on kasutada globaalset CSS-i. Siin loome ühe väliste ühise CSS-faili stiilidega. Sellise lähenemise korral on kõik klassinimed globaalses ulatuses, mis võib põhjustada nende vahel konflikte. Samuti saame teha palju väikseid CSS-faile. See lähenemine on ebaefektiivne suurte skaleeritavate rakenduste loomisel.

Järgmine lähenemine - reasisene stiilimine, seda kasutades saame lisada CSS-stiile reasiselt, sarnaselt tavalise HTML-iga. Sellisel juhul töötame atribuudiga style, andes sellele vajalikud CSS-omadused. Sellise stiilimise kasutamist peetakse halvaks tavaks ja seda soovitatakse ainult dünaamiliselt renderdamise ajal arvutatud stiilide lisamiseks. See viis on hea kiireks üksikute komponentide liidese prototüüpimiseks.

Järgmised paar viisi, mida me vaatleme - kaasaegsed, populaarsust koguvad, tõhusad stiilimise viisid. Need on just need viisid, mida soovitatakse rakendada suurte skaleeritavate Reacti rakenduste stiilimiseks.

Esimene neist - teegi Styled Components kasutamine, mis kasutab stiilimiseks mallstringe. See meetod võimaldab meil kirjutada tavalist CSS-i JS-koodis, kasutades kogu selle funktsionaalsust.

Teine viis - CSS-moodulite kasutamine. Sel juhul on CSS-moodul selline CSS-fail, milles vaikimisi on kõik klasside ja animatsioonide nimed kohalikus ulatuses, see tähendab, et need on kättesaadavad ainult komponendi sees, mis seda kasutab.

Nendes kahes viimases viisis me ei pea kartma klassinimede vahelisi konflikte, sest need on unikaalsed - kasutatakse kohaliku ulatuse kontseptsiooni. Samuti nende kasutamisel kaob vajadus BEM metodoloogia järele.

Järgmistes õppetükides vaatleme kõiki siin toodud viise üksikasjalikumalt.