TIL: styled-components

Cały czas staram się uczyć czegoś nowego, styled-components nie jest nową rzeczą w świecie CSS czy JS, jednak nie miałem okazji stworzyć czegoś przy pomocy właśnie styled-components.

Co to jest styled-components?

Najprościej tłumacząc jest to pisanie CSS lub SCSS bezpośrednio w JavaScript.

Jak wygląda kod?

Poniżej znajduje się plik JS o nazwie Button.js, który mogę importować w dowolnym komponencie. Obecnie piszę aplikację opartą na ReactJS.

Oczywiście musimy importować styled-components na samej górze, później w linijce 3 zaczynamy tworzyć nasz przycisk. Jest to prosty przycisk z zielonym obramowaniem, dodałem również transition, aby efekt hover nie był taki „twardy” dla użytkownika.

Świetną rzeczą w styled-components jest to, że możemy go pisać jak normalny SCSS, czyli dodajemy & i np :hover lub :focus.

Nasz przycisk po najechaniu myszką staje sie zielony, tak samo gdy używamy TAB.

Button CSS

Chcąc wykorzystać nasz button musimy go importować do komponentu.

import komponentu
Import Button.js

Teraz możemy śmiało użyć nasz styl przycisku w komponencie, robimy to tak samo jak z innymi komponentami używając <Button></Button>. Zwróć uwagę na to, że importowane komponenty zaczynają się dużą literą. Napisanie <button></button> sprawi, że wyświetli się zwykły przycisk, nie ten który stworzyliśmy.

Wykorzystanie przycisku w innym komponencie
Wykorzystanie <Button>

Tak wygląda nasz przycisk w kodzie JSX. Możemy oczywiście przekazywać parametry tak jak w tym przypadku dodałem primary, który zmieni domyślny kolor przycisku. Możemy również wywoływać funkcje po kliknięciu dodająć onClick.

Jakiś czas temu miałem zadanie z pewnej firmy i w wytycznych zadania było napisane, że muszę użyć właśnie styled-components. Było to kilka miesięcy temu, zadanie musiałem wykonać w bardzo szybkim czasie więc nie miałem okazji zapoznać się z całą dokumentacją.

Nie wiedziałem, że każdy komponent może być zapisany w osobnym pliku JS i po prostu importowany tam gdzie go potrzebuję. Skutkiem tego było duplikowanie komponentów, czyli najczęstszy błąd młodych programistów..

Na szczęście dobrze jest się uczyć na błędach i teraz pisanie stylów jest o niebo łatwiejsze. Następny projekt planuję napisać bez ani jednego pliku .SCSS!

Karolina Wawrzyniak

doradcajezykowy.com

Współpraca z Marcinem była wspaniała. W błyskawicznym tempie odpowiadał na wszystkie moje zapytania i zamieszczał kolejne elementy na stronie. W cierpliwy sposób tłumaczył na czym polega budowanie strony internetowej i na czym jako przedsiębiorca powinnam się skupić najbardziej. W stu procentach spełnił moje oczekiwania, zatem mogę go polecić jako świetnego fachowca!

Profesjonalna wycena projektu

Wyróżnij się w internecie