Dlaczego styled-components nadal pozostaje wygodnym wyborem dla React

Pomyśl o tym, jak wyglądał układ w React około siedem lat temu. Bezskutecznie próbowaliśmy izolować klasy CSS poprzez BEM, następnie przeszliśmy do CSS Modules, a potem pojawiły się styled-components. Pomysł pisania stylów bezpośrednio w plikach JS wydawał się początkowo szalony. Template literals JavaScript szybko przekształciły to podejście w jeden ze standardów tworzenia stron internetowych.

Teraz popularność zyskują Tailwind CSS i atomiczne frameworki CSS. Tymczasem repozytorium styled-components zdobyło ponad 41 tysięcy gwiazdek na GitHubie i nadal jest aktualizowane. Deweloperzy aktywnie używają go do układu, a maintainerzy projektu dostosowują kod do aktualnych funkcji React, w tym React Server Components (RSC).

Dlaczego zastąpić znajomy CSS tagowanymi szablonami

Koncept biblioteki jest prosty: tworzysz komponent React, który zawiera już wszystkie niezbędne style. Nie ma potrzeby wymyślania złożonej hierarchii klas ani martwienia się, że podstawowe style przycisku mogą przypadkowo zepsuć modal po drugiej stronie aplikacji.

Składnia pozostaje czystym CSS bez cudzysłowów i przecinków po każdej linii:

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.$primary ? "#0070f3" : "#ffffff"};
  color: ${props => props.$primary ? "#ffffff" : "#0070f3"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #0070f3;
  border-radius: 3px;
`;

export default function App() {
  return (
    <div>
      <Button>Обычная кнопка</Button>
      <Button $primary>Акцентная кнопка</Button>
    </div>
  );
}

Style są ściśle powiązane z komponentem. Usuń Button z projektu, a jego style znikną wraz z nim. W finalnym buildzie nie pozostaje żaden nieużywany kod.

Propsy, motywy i dynamiczny wygląd

Siła CSS-in-JS ujawnia się tam, gdzie prezentacja wizualna bezpośrednio zależy od danych lub stanu aplikacji. W CSS Modules musiałbyś bez końca przełączać klasy za pomocą utilsa classnames. Tutaj propsy są przekazywane bezpośrednio do bloku stylów.

Przekazywanie parametrów bez konfliktów z DOM

Zauważ składnię $primary z powyższego przykładu. Znak dolara oznacza transient props. Zmienne oznaczone w ten sposób są używane wewnątrz stylów, ale biblioteka filtruje je i nie przekazuje do finalnego tagu HTML. Konsola przeglądarki pozostaje czysta bez ostrzeżeń o nieznanych atrybutach.

Wbudowane motywy

Do pracy z jasnymi i ciemnymi motywami służy komponent ThemeProvider. Przekazuje obiekt ustawień w dół drzewa komponentów za pomocą React Context.

import styled, { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    main: '#0070f3',
    background: '#f4f4f4',
  }
};

const Container = styled.div`
  color: ${props => props.theme.colors.main};
  background: ${props => props.theme.colors.background};
`;

Zamień kolory w obiekcie theme, a interfejs natychmiast się zaktualizuje. To poważnie upraszcza budowanie własnych systemów projektowych.

Wydajność i renderowanie po stronie serwera

Biblioteka automatycznie śledzi, które komponenty są wyświetlane na stronie w danym momencie, i ładuje tylko ich style. Użytkownik nie pobiera dodatkowego kodu.

Wcześniej rozwiązania CSS-in-JS były krytykowane za dodatkowe obciążenie podczas hydratacji i problemy z SSR. W ostatnich wersjach zespół przepisał wewnętrzną logikę. Biblioteka może współpracować z streamingiem SSR i dobrze działa z React Server Components. Style są osadzane bezpośrednio w strumieniu HTML bez opóźnień.

Kiedy używać styled-components

Oto cztery scenariusze, w których biblioteka sprawdza się najlepiej:

• Budujesz wewnętrzną bibliotekę komponentów UI lub system projektowy z elastyczną personalizacją.
• Projekt zawiera wiele złożonych elementów interaktywnych, których stan wizualny zmienia się na podstawie danych wejściowych.
• Zespół jest przyzwyczajony do klasycznej składni CSS, ale chce niezawodnej izolacji stylów bez konfigurowania narzędzi budowania.
• Piszesz projekt wieloplatformowy z React i React Native, oczekując użycia jednego API dla stylów.

Jeśli priorytetem jest uruchomienie aplikacji na urządzeniach o niskiej mocy z minimalnym pakietem JS, możesz chcieć przyjrzeć się Tailwind CSS lub rozwiązaniom bez środowiska wykonawczego, takim jak Linaria i Pigment CSS.

styled-components pozostaje jasnym i przewidywalnym rozwiązaniem. Biblioteka oszczędza bólu głowy związanego z nazywaniem klas i daje czysty CSS bezpośrednio w ciele komponentu. W przypadku większości zadań frontendowych moc tego narzędzia jest więcej niż wystarczająca.