Stylování pomocí Styled Components v Reactu

V předchozích lekcích jsme si ukázali techniky stylování pomocí globálního CSS a inline stylování. V této lekci budeme pracovat s přístupem efektivnějším pro velké aplikace - použitím knihovny styled-components.

Vezměme si tedy náš komponent bez CSS stylů, který jsme používali v minulých lekcích:

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

Nejprve nainstalujeme knihovnu Styled Components:

terminalnpm install --save styled-components

Poté importujeme potřebný balíček do komponentu App:

App.jsimport styled from 'styled-components';

Nyní můžeme obalovat tagy do stylů a používat je jako React komponenty, ale už s připojenými styly přímo v JS. Tento přístup se také nazývá CSS v JS.

Pojďme nastylovat první odstavec. K tomu před funkcí App po řádcích importu vytvoříme komponent Text1. V objektu styled z knihovny potřebujeme odstavec, proto píšeme styled.p. Poté v šablonovém řetězci vypíšeme potřebné CSS styly - jako v běžném CSS:

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

Jak vidíte, zde používáme čisté CSS ve formě šablonových řetězců, což je velmi pohodlné. Podobným způsobem můžeme používat media query, pseudoprvky, selektory a další funkcionalitu CSS.

Nyní uvnitř funkce komponentu App nahradíme tag p naším vytvořeným komponentem Text1 s CSS styly:

App.js<Text1>text</Text1>     

Podobným způsobem nastylujeme druhý a třetí odstavec. K tomu vytvoří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 nakonec nastylujeme náš div. K tomu vytvoříme komponent a pojmenujeme jej Container:

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

Nahradíme všechny naše tagy vytvořenými 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>
  );
}

Díky tomuto přístupu lze vytvářet znovupoužitelné komponenty se styly.

Pokud otevřete vygenerované rozložení v panelu vývojáře v prohlížeči, uvidíte, že každý komponent má vygenerované své unikátní třídy. Takže se už nemusíme starat o konflikty mezi třídami jednotlivých komponentů.

Podobným způsobem lze stylovat komponenty, s použitím, například, knihovny Emotion.