Styled-components: literały szablonowe z tagami
Twórz stylizowane komponenty React, używając literałów szablonowych z tagami i biblioteki styled-components.
Styled-components: literały szablonowe z tagami to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Czym jest styled-components?
styled-components to biblioteka CSS-in-JS dla React, która umożliwia pisanie CSS bezpośrednio w plikach JavaScript za pomocą otagowanych literałów szablonowych. Każdy stylizowany komponent otrzymuje automatycznie unikalne nazwy klas o ograniczonym zakresie.
Otagowane literały szablonowe
Otagowane literały szablonowe JavaScript umożliwiają funkcji przetwarzanie łańcucha szablonowego. styled-components używa tej funkcji do analizowania CSS:
import styled from 'styled-components';
const Button = styled.button`
background: royalblue;
color: white;
padding: 10px 20px;
border-radius: 4px;
border: none;
cursor: pointer;
`;
// Usage in JSX:
// <Button>Click me</Button>Dynamiczne style z propsami
W literałach szablonowych można uzyskać dostęp do propsów komponentu, aby definiować dynamiczne style:
const Button = styled.button`
background: ${props => props.variant === 'danger' ? 'crimson' : 'royalblue'};
color: white;
opacity: ${props => props.disabled ? 0.5 : 1};
`;
// <Button variant="danger">Delete</Button>Alternatywa w postaci własnych właściwości CSS
W przypadku prostszych wartości dynamicznych należy preferować własne właściwości CSS zamiast logiki opartej na propsach — rozwiązanie to jest wydajniejsze i ogranicza interpolację w JavaScript:
const Card = styled.div`
background: var(--card-bg, white);
color: var(--card-text, #111);
`;
// Set variables via style prop: <Card style={{ '--card-bg': 'navy' }}>Rozszerzanie stylów
Rozszerzanie istniejącego stylizowanego komponentu w celu dodania stylów:
const PrimaryButton = styled(Button)`
background: royalblue;
font-weight: bold;
`;
const DangerButton = styled(Button)`
background: crimson;
`;Zagnieżdżanie i selektor &
styled-components obsługuje zagnieżdżanie podobne do Sass, używając & do odwoływania się do elementu nadrzędnego:
const Nav = styled.nav`
display: flex;
& a {
color: white;
text-decoration: none;
}
& a:hover {
text-decoration: underline;
}
`;createGlobalStyle
Definiowanie globalnych stylów (resetów i stylów bazowych) za pomocą createGlobalStyle:
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
*, *::before, *::after { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; }
`;
// Include <GlobalStyle /> in your app rootThemeProvider
styled-components udostępnia ThemeProvider umożliwiający dostęp do tokenów motywu w komponentach:
import { ThemeProvider } from 'styled-components';
const theme = { colors: { primary: 'royalblue' } };
const Button = styled.button`
background: ${({ theme }) => theme.colors.primary};
`;
// <ThemeProvider theme={theme}><App /></ThemeProvider>Uwagi dotyczące wydajności
styled-components generuje nazwy klas podczas działania aplikacji. W aplikacjach, w których wydajność ma kluczowe znaczenie, warto rozważyć statyczne wydzielanie za pomocą wtyczki Babel lub przejście na rozwiązania bez uruchomieniowego narzutu, takie jak Vanilla Extract lub moduły CSS.
Renderowanie po stronie serwera
styled-components obsługuje SSR za pomocą interfejsu API ServerStyleSheet, który zbiera i wstrzykuje style podczas renderowania po stronie serwera, zapobiegając chwilowemu wyświetlaniu treści bez stylów.
Alternatywy i ekosystem
Ekosystem styled-components obejmuje: emotion (podobne API), linaria (bez uruchomieniowego narzutu), Vanilla Extract (bezpieczne typowanie) oraz Panda CSS (podejście utility-first). Każde z tych rozwiązań stanowi inny kompromis między narzutem podczas działania, DX i wydajnością.
Szybkie sprawdzenie
W jaki sposób styled-components zapobiega kolizjom nazw klas między komponentami?
Podsumowanie
styled-components używa otagowanych literałów szablonowych do definiowania CSS obok komponentów React. Propsy mogą sterować dynamicznymi stylami za pomocą interpolacji JavaScript. Komponenty można rozszerzać, zagnieżdżać i dostosowywać do motywu za pośrednictwem ThemeProvider. W środowisku produkcyjnym warto rozważyć wtyczkę Babel do statycznego wydzielania oraz obsługę renderowania po stronie serwera. W przypadku rozwiązań bez uruchomieniowego narzutu warto ocenić Vanilla Extract lub moduły CSS.
Ucz się CSS dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Styled-components: literały szablonowe z tagami” jest bezpłatna?
Tak — pełny tekst „Styled-components: literały szablonowe z tagami” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Styled-components: literały szablonowe z tagami”?
Twórz stylizowane komponenty React, używając literałów szablonowych z tagami i biblioteki styled-components. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Styled-components: literały szablonowe z tagami”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Styled-components: literały szablonowe z tagami
- Emotion: css() i styled()
- CSS Modules: style z ograniczonym zakresem
- Vanilla Extract: CSS-in-JS bez działania w czasie wykonywania