React komponentu stilizēšanas veidi

Pastāv daudz dažādu veidu React komponentu stilizēšanai. Šeit mēs apskatīsim dažus no pamata veidiem.

Standarta pieeja, ko mēs varam izmantot, tāpat kā parastā web lapu stilizēšanā - ir globālā CSS izmantošana. Šeit mēs veidojam vienu ārēju kopīgu CSS failu ar stiliem. Izmantojot šo pieeju, visi klases nosaukumi atrodas globālajā darbības jomā, kas var izraisīt konfliktus starp tiem. Arī var izveidot daudz mazu CSS failu. Šī pieeja ir maz efektīva, veidojot lielas mērogojamas lietotnes.

Nākamā pieeja - inlainā stilizēšana, izmantojot to, mēs varam pievienot CSS stilus inlain, līdzīgi kā tas tiek darīts parastā HTML. Šajā gadījumā mēs strādāsim ar atribūtu style, nododot tam nepieciešamos CSS rekvizītus. Šādas stilizēšanas izmantošana tiek uzskatīta par sliktu praksi un tiek ieteikta tikai dinamiskā aprēķinātu stilo pievienošanai renderēšanas laikā. Šis veids ir labs ātrai atsevišķa komponenta interfeisa prototipēšanai.

Nākamie pāris veidi, kurus mēs apskatīsim - mūsdienīgi, pieaugošā popularitātē, efektīvi stilizēšanas veidi. Tie ir tieši tie veidi, kurus ieteicams izmantot lielu mērogojamu React lietotņu stilizēšanai.

Pirmais no tiem - bibliotēkas Styled Components lietošana, kas stilizēšanai izmanto veidnes virknes. Šī metode ļauj mums rakstīt parasto CSS JS kodā, izmantojot visu tā funkcionalitāti.

Otrs veids - CSS moduļu lietošana. Šajā gadījumā, CSS modulis ir tāds CSS fails, kurā pēc noklusējuma visi klases un animāciju nosaukumi atrodas lokālajā darbības jomā, tas ir, pieejami tikai komponenta iekšienē, kas to izmanto.

Ar šiem diviem pēdējiem veidiem mēs varam nebaidīties no konfliktiem starp klases nosaukumiem, jo tie ir unikāli - tiek izmantota lokālās darbības jomas koncepcija. Arī tos izmantojot izzust nepieciešamība pēc BEM metodoloģijas.

Nākamajās nodarbībās mēs sīkāk apskatīsim visus šeit minētos veidus.