Stilizacija pomoću Styled Components u Reactu

U prethodnim lekcijama smo razmotrili tehnike stilizacije korišćenjem globalnog CSS-a i inlajn stilizacije. U ovoj lekciji ćemo raditi sa pristupom koji je efikasniji za velike aplikacije - korišćenjem biblioteke styled-components.

Dakle, uzmimo našu komponentu bez CSS stilova, koju smo koristili u prethodnim lekcijama:

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

Za početak, instalirajmo biblioteku Styled Components:

terminalnpm install --save styled-components

Zatim, importujmo neophodni paket u komponentu App:

App.jsimport styled from 'styled-components';

Sada možemo da oblažimo tagove u stilove i primenjujemo ih kao React komponente, ali već sa stilovima prikačenim direktno u JS-u. Ovaj pristup se još naziva CSS u JS-u.

Hajde da stilizujemo prvi pasus. Za ovo pre funkcije App, posle linija importa kreiramo komponentu Text1. U objektu styled iz biblioteke potreban nam je pasus, pa pišemo styled.p. Zatim, u šablonskom stringu nabrojimo neophodne nam CSS stilove - kao u običnom CSS-u:

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

Kao što vidite, ovde koristimo čisti CSS u obliku šablonskih stringova, što je veoma zgodno. Na sličan način možemo koristiti medija upite, pseudoelemente, selektore i drugi funkcionalitet CSS-a.

Sada unutar funkcije komponente App zamenimo tag p kreiranom komponentom Text1 sa CSS stilovima:

App.js<Text1>text</Text1>

Na sličan način stilizujmo drugi i treći pasus. Za ovo kreiramo komponente 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, konačno, stilizujmo naš div. Za ovo kreiramo komponentu i nazovimo je Container:

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

Zamenimo sve naše tagove kreiranim komponentama:

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>
  );
}

Zahvaljujući ovom pristupu možemo kreirati višekratno upotrebljive komponente sa stilovima.

Ako otvorite generisanu verziju u panelu programera u pretraživaču, videćete da svaka komponenta ima svoje jedinstvene klase. Tako da nam više nije potrebno brinuti o konfliktima između klasa pojedinačnih komponenti.

Na sličan način je moguće stilizovati komponente, koristeći, na primer, biblioteku Emotion.