Způsoby stylování React komponent

Existuje mnoho různých způsobů stylování React komponent. Zde se podíváme na některé základní z nich.

Standardní přístup, který můžeme použít, stejně jako při běžném stylování webových stránek - je použití globálního CSS. Zde vytváříme jeden externí společný CSS soubor se styly. Při tomto přístupu jsou všechna jména tříd v globálním oboru názvů, což může vést ke konfliktům mezi nimi. Také lze vytvořit mnoho malých CSS souborů. Tento přístup je málo efektivní při vytváření velkých škálovatelných aplikací.

Další přístup - inline stylování, při jeho použití můžeme přidat CSS styly inline, podobně jako se to dělá v běžném HTML. V tomto případě budeme pracovat s atributem style, předávajíce mu potřebné CSS vlastnosti. Použití takového stylování je považováno za špatnou praxi a doporučuje se pouze pro přidávání dynamicky vypočítaných během renderování stylů. Tento způsob je vhodný pro rychlé prototypování rozhraní jednotlivých komponent.

Následující pár způsobů, které si prohlédneme - moderní, získávající na popularitě, efektivní způsoby stylování. To jsou právě ty způsoby, které se doporučuje aplikovat pro stylování velkých škálovatelných React aplikací.

První z nich - použití knihovny Styled Components, která pro stylování používá šablonové řetězce. Tato metoda nám umožňuje psát běžné CSS v JS kódu, využívajíce celou jeho funkcionalitu.

Druhý způsob - použití CSS modulů. V tomto případě, CSS modul - je takový CSS soubor, ve kterém ve výchozím nastavení jsou všechny názvy tříd a animací v lokálním oboru názvů, to znamená dostupné pouze uvnitř komponentu, který jej používá.

U těchto dvou posledních způsobů se nemusíme bát konfliktů mezi jmény tříd, protože jsou unikátní - používá se koncept lokálního oboru názvů. Také při jejich použití odpadá nutnost metodologie BEM.

V následujících lekcí se podíváme na všechny zde uvedené způsoby podrobněji.