Stilizarea cu Styled Components în React

În lecțiile anterioare am analizat tehnicile de stilizare folosind CSS global și stilizarea inline. În această lecție vom lucra cu o abordare mai eficientă pentru aplicațiile mari - utilizarea bibliotecii styled-components.

Deci, să luăm componenta noastră fără stiluri CSS, pe care am folosit-o în lecțiile anterioare:

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

Pentru început, să instalăm biblioteca Styled Components:

terminalnpm install --save styled-components

Apoi importăm pachetul necesar în componenta App:

App.jsimport styled from 'styled-components';

Acum putem împacheta etichetele în stiluri și să le aplicăm ca componente React, dar deja cu stiluri atașate direct în JS. Această abordare se mai numește CSS în JS.

Hai să stilizăm primul paragraf. Pentru aceasta înainte de funcția App după liniile de import creăm componenta Text1. În obiectul styled din bibliotecă avem nevoie de un paragraf, deci scriem styled.p. Apoi, în șirul șablon enumerăm stilurile CSS necesare - ca în CSS obișnuit:

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

După cum vedeți, folosim aici CSS pur sub formă de șiruri șablon, ceea ce este foarte convenabil. În mod similar putem folosi interogări media, pseudo-elemente, selectori și alte funcționalități CSS.

Acum în interiorul funcției componentei App înlocuim eticheta p cu componenta creată de noi Text1 cu stiluri CSS:

App.js<Text1>text</Text1>     

În mod similar stilizăm al doilea și al treilea paragraf. Pentru aceasta creăm componentele 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, în final, stilizăm div-ul nostru. Pentru aceasta creăm o componentă și o numim Container:

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

Înlocuim toate etichetele noastre cu componentele create:

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

Datorită acestei abordări se pot crea componente reutilizabile cu stiluri.

Dacă deschideți marcajul generat în panela de dezvoltator din browser, veți vedea că fiecare componentă are generate propriile clase unice. Astfel, nu mai trebuie să ne îngrijorăm de conflictele dintre clasele componentelor separate.

În mod similar se pot stiliza componente, folosind, de exemplu, biblioteca Emotion.