Stylizacja za pomocą Styled Components w React

W poprzednich lekcjach omówiliśmy techniki stylowania przy użyciu globalnego CSS i stylowania inline. W tej lekcji pobawimy się bardziej efektywnym dla dużych aplikacji podejściem - użyciem biblioteki styled-components.

Zatem weźmy nasz komponent bez stylów CSS, którego używaliśmy w poprzednich lekcjach:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

Na początek zainstalujmy bibliotekę Styled Components:

terminalnpm install --save styled-components

Następnie zaimportujmy potrzebny pakiet do komponentu App:

App.jsimport styled from 'styled-components';

Teraz możemy opakowywać tagi w style i stosować je jako komponenty React, ale już z dołączonymi bezpośrednio w JS stylami. Takie podejście nazywa się jeszcze CSS w JS.

Ostylujmy pierwszy akapit. W tym celu przed funkcją App po liniach importu stwórzmy komponent Text1. W obiekcie styled z biblioteki potrzebny nam jest akapit, dlatego piszemy styled.p. Następnie, w stringu szablonowym wymieniamy potrzebne nam style CSS - jak w zwykłym CSS:

App.jsconst Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

Jak widzicie, używamy tutaj czystego CSS w postaci stringów szablonowych, co jest bardzo wygodne. W podobny sposób możemy używać zapytań medialnych, pseudoelementów, selektorów i innej funkcjonalności CSS.

Teraz wewnątrz funkcji komponentu App zamieńmy tag p na stworzony przez nas komponent Text1 ze stylami CSS:

App.js<Text1>text</Text1>     

W podobny sposób ostylujmy drugi i trzeci akapit. W tym celu stworzymy komponenty Text2 i Text3:

App.jsconst Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

I, na koniec, ostylujmy naszego diva. W tym celu stworzymy komponent i nazwiemy go Container:

App.jsconst Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

Zamieńmy wszystkie nasze tagi na stworzone komponenty:

Calculator.jsimport styled from "styled-components";

const Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

const Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

const Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

function App() {
  return (
    <Container>
      <Text1>text</Text1>
      <Text2>text</Text2>
      <Text3>text</Text3>
    </Container>
  );
}

Dzięki takiemu podejściu można tworzyć wielokrotnie używane komponenty ze stylami.

Jeśli otworzycie wygenerowany kod w panelu deweloperskim w przeglądarce, to zobaczycie, że u każdego komponentu wygenerowane są swoje unikalne klasy. W ten sposób, nie musimy się więcej martwić o konflikty między klasami poszczególnych komponentów.

W podobny sposób można stylować komponenty, używając, na przykład, biblioteki Emotion.