Frontend Academy · Lekcja

CSS-in-JS: Styled-components i Emotion

Lekcja 3 z 413 kroki

CSS-in-JS: Styled-components i Emotion to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Czym jest CSS-in-JS

CSS-in-JS służy do zapisywania stylów komponentów bezpośrednio w JavaScript/TypeScript. Style znajdują się obok komponentów, obsługują dynamiczne wartości z propsów i są automatycznie ograniczane do zakresu. Dwie najpopularniejsze biblioteki to styled-components i Emotion.

Podstawy styled-components

Należy używać otagowanych literałów szablonowych do definiowania stylowanych komponentów. Wynikiem jest komponent React renderujący element HTML z zastosowanymi stylami.

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? '#6366f1' : 'white'};
  color: ${props => props.primary ? 'white' : '#6366f1'};
  padding: 8px 16px;
  border: 2px solid #6366f1;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }
`;

<Button primary>Primary</Button>
<Button>Outline</Button>

Emotion — właściwość css

Właściwość css biblioteki Emotion stosuje style do dowolnego elementu JSX. Wymaga dyrektywy @emotion/react lub presetu Babel.

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

function Card({ featured }: { featured?: boolean }) {
  return (
    <div css={css`
      padding: 16px;
      border-radius: 8px;
      border: ${featured ? '2px solid #6366f1' : '1px solid #e2e8f0'};
    `}>
      Content
    </div>
  );
}

Dynamiczne style z propsów

Obie biblioteki mogą odczytywać propsy w celu obliczania stylów. Jest to ich główna przewaga nad statycznym CSS — nie trzeba przełączać klas.

Motywy z ThemeProvider

styled-components i Emotion obsługują ThemeProvider, który wstrzykuje wartości motywu do wszystkich stylowanych komponentów.

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: '#6366f1', bg: '#f7fafc' }, space: { sm: 8, md: 16 } };

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

// Access in styled component:
const Card = styled.div`
  background: ${props => props.theme.colors.bg};
  padding: ${props => props.theme.space.md}px;
`;

Rozszerzanie stylowanych komponentów

Istniejący stylowany komponent można rozszerzyć, aby utworzyć jego wariant bez powielania stylów.

const Button = styled.button`
  padding: 8px 16px;
  border-radius: 4px;
`;

const DangerButton = styled(Button)`
  background: #e53e3e;
  color: white;
`;

Style globalne

Należy używać createGlobalStyle (styled-components) lub Global (Emotion) do definiowania globalnego CSS, na przykład stylów elementu body i resetów.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font-family: system-ui; }
`;

<><GlobalStyle /><App /></>

Koszt CSS-in-JS w czasie działania

Biblioteki CSS-in-JS wstrzykują style w czasie działania za pomocą JavaScriptu. Zwiększa to zużycie CPU podczas analizowania i wstrzykiwania stylów, a także rozmiar pakietu JavaScript. Alternatywy bez kosztu w czasie działania (vanilla-extract, linaria) generują statyczny CSS podczas budowania.

Alternatywy bez kosztu w czasie działania

vanilla-extract: style są zapisywane w TypeScript i kompilowane do statycznego CSS. linaria: składnia CSS-in-JS kompilowana do CSS Modules. Oba rozwiązania zapewniają wygodę CSS-in-JS bez kosztu w czasie działania.

TypeScript ze styled-components

Należy zdefiniować ThemeType i rozszerzyć interfejs DefaultTheme ze styled-components, aby uzyskać w pełni typowane motywy.

import 'styled-components';
import { theme } from './theme';

declare module 'styled-components' {
  export interface DefaultTheme extends typeof theme {}
}

Kiedy wybrać CSS-in-JS

CSS-in-JS doskonale sprawdza się w przypadku: dynamicznych stylów zależnych od wartości JavaScriptu w czasie działania, systemów projektowych z rozbudowanymi potrzebami dotyczącymi motywów oraz zespołów preferujących przepływy pracy skoncentrowane na JS. Koszt w czasie działania jest zwykle akceptowalny w interfejsach, w których wydajność nie ma kluczowego znaczenia.

Szybkie sprawdzenie

Jaki jest główny kompromis związany z bibliotekami CSS-in-JS działającymi w czasie działania w porównaniu ze statycznymi rozwiązaniami CSS?

Odpowiedz w interaktywnej lekcji

Podsumowanie: CSS-in-JS

styled-components: otagowane literały szablonowe renderujące stylowany element React. Emotion: właściwość css lub API styled. Dynamiczne style z propsów eliminują przełączanie klas. ThemeProvider wstrzykuje wartości motywu. createGlobalStyle służy do globalnego CSS. Głównym kompromisem jest koszt w czasie działania. Alternatywy bez tego kosztu: vanilla-extract, linaria.

Bezpłatny start

Ucz się HTML 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: 41
Lekcje: 163

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „CSS-in-JS: Styled-components i Emotion” jest bezpłatna?

Tak — pełny tekst „CSS-in-JS: Styled-components i Emotion” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „CSS-in-JS: Styled-components i Emotion”?

Proszę pisać style komponentów jako tagowane literały szablonowe za pomocą styled-components lub używać właściwości css z Emotion, a także wykorzystywać propsy do tworzenia dynamicznych stylów. Ćwiczysz Frontend 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ąć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend 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 3 z 4.

Ile czasu zajmuje lekcja „CSS-in-JS: Styled-components i Emotion”?

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 Frontend Academy?

Tak. Każda lekcja Frontend 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

Metodologia BEM: Block, Element, Modifier
CSS Modules: ograniczone zakresowo nazwy klas
CSS-in-JS: Styled-components i Emotion
Tailwind CSS: podejście utility-first

← Powrót do Frontend Academy