Polub bloga na fejsie!

Styled Components – najlepszy sposób na style w ReactJS?

6

W dzisiejszym wpisie chciałbym Ci przedstawić bibliotekę Styled Components. Pozwala ona na tworzenie komponentów ReactJS odpowiedzialnych tylko i wyłącznie za wygląd aplikacji.

Jest to dość świeże podejście do tego tematu ale zyskujące sobie dość szybko wielu zwolenników. Dlatego też, oprócz pokazania o co chodzi postaram się również, w kilku zdaniach zastanowić się czy jest to najlepsze możliwe podejście do nadawania stylów aplikacji ReactJS.

Co to są Styled Components?

Na początek zobaczmy na co pozwala nam biblioteka styled-components. Myślę, że świetnie wyjaśnia to zdjęcie zamieszczone na stronie projektu:

styled components - przykład

Zanim omówię powyższy kod, dwa słowa o tym czego tutaj nie widać… Po pierwsze instalacja – jest to normalny pakiet dostępny w repozytorium npm, więc nic nas tutaj nie zaskoczy:

Po instalacji, możemy zaimportować obiekt styled w pliku, w którym znajdzie się implementacja komponentu:

Teraz mogę już spokojnie przejść do omówienia przykładu widocznego na powyższym obrazku.

Wyjaśnienie przykładu

Jak widzisz, na początku zadeklarowana została stała Button do której przypisano dość dziwne wywołanie (z wykorzystaniem tagged template literals)… Nie będę się tutaj wdawać w szczegóły implementacyjne stojące za tą biblioteką – myślę, że w tym artykule jest to fajnie wyjaśnione. Generalnie poprzez wywołanie, w tym przypadku styled.button, tworzony jest w locie i przypisywany do stałej Button komponent React, który renderuje element button z nadanymi mu stylami CSS, podanymi zaraz za wywołaniem styled.button. Oczywiście, jest to tylko przykład – można tutaj stworzyć komponent renderujący dowolny inny element HTML (wtedy na przykład było by to wywołanie styled.p albo styled.div).

W przykładzie pokazano, że style można w łatwy sposób parametryzować. Wystarczy tylko przy wywołaniu takiego komponentu, przekazać mu odpowiedni parametr (linia 13). Będzie on wtedy dostępny w stylach komponentu poprzez obiekt props (widać to w liniach 9 oraz 10).

Po uruchomieniu kodu wykorzystującego taki komponent widać, że faktycznie wyrenderowany został element button:

Zauważ, że elementom tym nadane zostały klasy, których nazwy to jakiś losowy ciąg znaków. Jeśli zajrzysz do stylów tych elementów (na przykład korzystając z narzędzi webmasterskich Twojej przeglądarki) to zauważysz, że pasują one do stylów, które podaliśmy przy tworzeniu komponentu Button.

Generalnie to tyle jeśli chodzi o ogólną zasadę działania biblioteki styled components. Zachęcam do zapoznania się z dokumentacją projektu na GitHubie. Znajdziesz tam znacznie więcej informacji na temat tego, jak definiować wygląd aplikacji React za pomocą komponentów generowanych w ten sposób.

Jeśli chodzi o powyższy przykład, to możesz go sobie przetestować na żywo pod tym adresem – do tego też namawiam!

Czy to najlepszy sposób na style w aplikacji React?

Powyżej przedstawiłem ogólną zasadę działania biblioteki Styled Components. Pytanie teraz czy jest to właściwy kierunek… Moim zdaniem zdecydowanie tak!

Dotychczas miałem trochę problem ze stylami w aplikacjach ReactJS. Z jednej strony można było stosować podejście klasyczne czyli wszystkie style gdzieś w jednym osobny katalogu layout czy tam styles. Z drugiej, możliwe było definiowanie stylów specjalnie dla danego komponentu – wystarczyło zaimportować w nim odpowiedni plik *.css/*.sass/*.less. U mnie kończyło się to zwykle takim miksem – część stylów globalnych w osobnym katalogu + style per komponent. Nadal jednak były to osobne pliki… Po tym jak wprowadzając ReactJS połączono, za pomocą składni JSX, definicję szablonu komponentu z jego logiką, jakoś nie pasowało mi to do tej, całkiem przecież sensownej, koncepcji komponentu.

Wprowadzenie biblioteki takiej jak Styled Components wydaje się odpowiedzią na te problemy. Co prawda nie wykorzystywałem jej jeszcze produkcyjnie ale potrafię sobie, dzięki niej, wyobrazić aplikację utworzoną w całości z komponentów ReactJS. Bez ani jednogo pliku CSS. Możemy przecież utworzyć sobie zestaw komponentów wykorzystywanych globalnie – wszelkie przyciski, paragrafy, nagłówki, które w całej aplikacji mają wyglądać tak samo. Do tego komponenty-wrappery, które definiują ogólne ramy layoutu aplikacji. No i oczywiście komponenty ze specyficznymi stylami, wykorzystywanymi tylko w szczególnych przypadkach.

Oczywiście komponenty wygenerowane z użyciem biblioteki Styled Components odpowiadają tylko za wygląd – nie należy ich mylić z bezstanowymi komponentami wizualnymi czy też kontenerami – pisałem o nich w oddzielnym wpisie. Te odpowiadają za wyświetlanie logiki aplikacji ale powinny robić to z wykorzystaniem tych stricte wizualnych komponentów.

Podsumowanie

To tyle na dziś – mam nadzieję, że udało mi się zainteresować Cię tematem komponentów generowanych za pomocą biblioteki Styled Components. Jestem ciekaw co o nich sądzisz oraz czy podejście, które przedstawiłem powyżej jest rzeczywiście dobre i warto do niego dążyć. A może jest jeszcze jakaś inna, trzecia droga, o której nie wiem?

REACT, REDUX, REACT-ROUTER - KURSY ON-LINE

Chcesz od podstaw poznać tajniki React, Redux oraz react-router? Zapraszam do moich szkoleń on-line:

Przejdź do szkoleń
  • szacho

    To jest przecież potężniejsze niż sass!

  • Busz

    A co jeśli chcę ostylować diva, w który opakowany jest dany komponent?

  • inzKornel

    Warto zainteresować się też czymś takim jak react-css-themr
    Jako przykład użycia można wymienić bibliotekę react toolbox, autorstwa tego samego Pana 🙂

  • Tomek

    A co jeżeli mamy w komponencie inny komponent i chcemy zmienić mu styl, np. z inline-block na block? Pracując z innymi bibliotekami jak React-Bootstrap bardzo często jest taka sytuacja, że trzeba zmienić jakiś standardowy kolor dropdowna czy nadpisać jakieś property.

    • Tutaj raczej mamy zupełnie inną filozofię pracy ze stylami – robimy takie stylowe komponenty jakie potrzebujemy, no i oczywiście praca z Bootstrapem w takim przypadku odpada…

Google Analytics Alternative