Stylowanie aplikacji (styled-components) – Kurs React – cz. 4

Stylowanie aplikacji za pomocą plików CSS może być problematyczne dla Reacta. W tej części opowiem dlaczego warto skorzystać ze styled components i pokażę jak tego używać.

Czym są styled-components?

Styled-components to tak naprawdę CSS w JavaScript. React to nowy sposób na budowanie aplikacji internetowych. W związku z tym potrzebna była inna implementacja styli.

Dlaczego warto używać styled-components?

Unikalność klas

W poprzednim artykule na temat stylowania aplikacji za pomocą CSS, LESS, SASS pojawia się zalecenie, które mówi o niestosowaniu tych samych klas CSS w różnych komponentach. To jest jeden z głównych powodów, dla których warto (powinno się) stosować styled components.

Style na podstawie propsów

Z racji, że style są pisane w plikach JavaScriptowych to jest możliwość używania całej jego mocy! Wszystko to dzięki template literals – czyli zapisowi, który umożliwia używanie wyrażeń w stringach. Oznacza to, że można ostylować komponent na podstawie otrzymanych propsów.

Łatwe testowanie

Testowanie aplikacji za pomocą testów jednostkowych jest bardzo istotną rzeczą. Niestety możliwość testowania CSS jest bardzo ograniczona. Styled componentsy umożliwiają łatwe ich testowanie, co w przypadku większych projektów odgrywa ważną rolę. Więcej informacji na temat testów jednostkowych pojawi się w kolejnych częściach.

Inne powody

• użytkownik będzie pobierał mniej CSSów (tylko te, które potrzebne są do załadowania danej podstrony),
• łatwiej usunąć nieużywane style poprzez lepsze wsparcie narzędzi,
• automatyczne prefiksy CSS,
• łatwiejsze w utrzymaniu

Instalacja styled components

Aby zainstalować styled-components należy w terminalu (w folderze z projektem) uruchomić następującą komendę:

npm install --save styled-components

Stylowanie za pomocą styled components

Każdy element, który ma być stylowany to będzie osobny komponent Reactowy. W poprzedniej części stworzyliśmy komponent Heading z użyciem LESS i SASS. Teraz zostanie przepisany na styled components.

Wszystkie styled componenty warto trzymać w osobnym folderze. Pozwala to na łatwiejsze zarządzanie, ponieważ mamy odseparowane komponenty, które są tylko ostylowane od komponentów, które zawierają logikę aplikacji.

W folderze komponentu Heading zostaje utworzony folder styled, a w nim plik PageHeading.js, który będzie odpowiadał za wygląd komponentu.

Struktura katalogów i plików wygląda następująco:

Import styled components

Pierwszą rzeczą jaką należy zrobić to zaimportowanie paczki styled-components.

Stylowanie

W pliku zostaje utworzona stała PageHeading (komponent), która jest eksportowana.

Stała przypisywana jest do styled, a po kropce umieszczany jest element HTMLowy, który ma być ostylowany. W tym przypadku to znacznik H1. Następnie w template literals („) umieszczany jest kod CSS, który skopiowany jest z Heading.scss (po skopiowaniu plik można usunąć).

Efekt renderowania aplikacji jest taki sam jak w poprzedniej wersji, ponieważ został zmieniony tylko sposób implementacji styli.

Style bazujące na propsach

Stylowanie komponentów w oparciu o propsy to częsta praktyka. Łatwiej jest zaadaptować je w różnych częściach aplikacji. Na innej podstronie może być potrzebny inny wariant wyglądu danego komponentu. Wtedy należy dodać obsługę propsów w stylach.

Pierwszym krokiem będzie przekazanie do Heading propsa variant. Nazwa propsa może być dowolna. Najważniejsze żeby była zrozumiała i opisywała co dany props robi.

Zmiana dotyczy jedenastej linii.

W pliku Heading.js należy zaimportować nowy styled component (linia 2). Następnie trzeba przekazać propsa variant dalej, ponieważ PageHeading to osobny komponent (linia 6).

W PageHeading.js zostaje zmienione tło strony. W linii czwartej zostaje użyty template literals (coś co pozwoli na używanie zmiennych w kodzie CSS). W tej linii zostaje również użyta skrócona wersja JavaScriptowego ifa. Sprawdzana jest wartość propsa variant, jeśli to „secondary” to kolor tła zostanie ustawiony na pierwszą wartość HEX za znakiem zapytania, jeśli to inna wartość ustawi się wtedy druga wartość, która jest za dwukropkiem

Rozszerzanie styled componentu (dodatkowe style)

Rozszerzanie styli czyli tworzenie nowych styled componentów, które będą dziedziczyły style po innych to dobry sposób na kreowanie innych wariantów tych samych komponentów.

W pliku PageHeading.js należy stworzyć drugi komponent o nazwie LargePageHeading, który będzie posiadał takie same style jak komponent PageHeading, ale zostaje zmieniona minimalna wysokość.

W pliku Heading.js należy zmienić komponent na nowo powstały.

Po zmianach otrzymamy ten sam komponent, tylko z inną wysokością.

Praca z dokumentacją

Zachęcam do pracy z dokumentacją styled-components. Można tam znaleźć więcej przykładów oraz informacje na temat bardziej zaawansowanych funkcji.

Ćwiczenie

Stwórz kilka styled-componentów, które będziesz mógł użyć w aplikacji (powinny być generyczne) np.:

• nagłówek
• logo
• stopka

Uwzględnij w nich możliwość zmiany za pomocą propsów np.:

• koloru czcionki
• koloru tła
• wielkości