Stylovanie pomocou Styled Components v React

V predchádzajúcich lekciách sme preskúmali techniky stylovania pomocou globálneho CSS a inline stylovania. V tejto lekcii budeme pracovať s prístupom, ktorý je efektívnejší pre veľké aplikácie - použitím knižnice styled-components.

Takže, zoberme si náš komponent bez CSS štýlov, ktorý sme používali v predchádzajúcich lekciách:

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

Na začiatok nainštalujme knižnicu Styled Components:

terminalnpm install --save styled-components

Potom importujeme potrebný balík do komponentu App:

App.jsimport styled from 'styled-components';

Teraz môžeme obaľovať tagy do štýlov a použiť ich ako React komponenty, ale už s pripojenými štýlmi priamo v JS. Tento prístup sa tiež nazýva CSS v JS.

Poďme nastylizovať prvý odsek. Na to pred funkciou App po riadkoch importov vytvoríme komponent Text1. V objekte styled z knižnice potrebujeme odsek, preto píšeme styled.p. Potom, v šablónovom reťazci vymenujeme potrebné CSS štýly - ako v obyčajnom CSS:

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

Ako vidíte, používame tu čisté CSS vo forme šablónových reťazcov, čo je veľmi pohodlné. Podobným spôsobom môžeme používať mediálne dopyty, pseudoelementy, selektory a inú funkcionalitu CSS.

Teraz vo vnútri funkcie komponentu App nahradíme tag p naším vytvoreným komponentom Text1 s CSS štýlmi:

App.js<Text1>text</Text1>     

Podobným spôsobom nastylizujeme druhý a tretí odsek. Na to vytvoríme komponenty Text2 a Text3:

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

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

A nakoniec, nastylizujeme náš div. Na to vytvoríme komponent a nazveme ho Container:

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

Nahradíme všetky naše tagy vytvorenými komponentmi:

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

Vďaka tomuto prístupu je možné vytvárať viackrát použiteľné komponenty so štýlmi.

Ak otvoríte vygenerovanú verziu v paneli vývojára v prehliadači, uvidíte, že každý komponent má vygenerované svoje unikátne triedy. Takže sa už nemusíme obávať konfliktov medzi triedami jednotlivých komponentov.

Podobným spôsobom je možné stylovať komponenty, použitím, napríklad, knižnice Emotion.