Metody stylowania komponentów React
Istnieje wiele różnych sposobów stylowania komponentów React. Tutaj przyjrzymy się niektórym podstawowym z nich.
Standardowe podejście, które możemy zastosować, tak jak przy zwykłym stylowaniu stron internetowych - to użycie globalnego CSS. Tutaj tworzymy jeden zewnętrzny wspólny plik CSS ze stylami. Przy tym podejściu, wszystkie nazwy klas znajdują się w globalnej przestrzeni nazw, co może prowadzić do konfliktów między nimi. Również można stworzyć wiele małych plików CSS. To podejście jest mało efektywne przy tworzeniu dużych skalowalnych aplikacji.
Następne podejście - stylowanie inline,
używając go, możemy dodać style CSS inline,
podobnie jak to się robi w zwykłym HTML. W
tym przypadku będziemy pracować z atrybutem
style, przekazując mu niezbędne
właściwości CSS. Zastosowanie takiego stylowania
jest uważane za złą praktykę i jest zalecane
tylko do dodawania dynamicznie
obliczanych podczas renderowania stylów. Ten
sposób jest dobry do szybkiego prototypowania
interfejsu pojedynczego komponentu.
Następne kilka sposobów, którym się przyjrzymy - nowoczesne, zyskujące popularność, efektywne metody stylowania. To właśnie te metody, które są zalecane do stosowania do stylowania dużych skalowalnych aplikacji React.
Pierwszy z nich - zastosowanie biblioteki Styled Components, która wykorzystuje do stylowania łańcuchy szablonowe. Ta metoda pozwala nam pisać zwykły CSS w kodzie JS, wykorzystując cały jego funkcjonalność.
Drugi sposób - zastosowanie modułów CSS. W tym przypadku, moduł CSS - to taki plik CSS, w którym domyślnie wszystkie nazwy klas i animacji znajdują się w lokalnej przestrzeni nazw, czyli dostępne są tylko wewnątrz komponentu, który go używa.
W tych dwóch ostatnich metodach nie musimy się obawiać konfliktów między nazwami klas, ponieważ są one unikalne - używana jest koncepcja lokalnej przestrzeni nazw. Również przy ich użyciu odpadá konieczność stosowania metodologii BEM.
W kolejnych lekcjach przyjrzymy się wszystkim przytoczonym tutaj metodom bardziej szczegółowo.
