0Pricing
CSS Academy · Урок

Styled-components: литералы шаблонов с тегами

Создавайте стилизованные компоненты React с помощью литералов шаблонов с тегами и библиотеки styled-components.

«Styled-components: литералы шаблонов с тегами» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое styled-components

styled-components — это библиотека CSS-in-JS для React, которая позволяет писать CSS непосредственно внутри файлов JavaScript с помощью тегированных шаблонных литералов. Каждый стилизованный компонент получает автоматически ограниченные областью действия уникальные имена классов.

Тегированные шаблонные литералы

Тегированные шаблонные литералы JavaScript позволяют функции обрабатывать строку-шаблон. styled-components использует их для разбора 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>

Динамические стили с помощью свойств

Получайте свойства компонента внутри шаблонного литерала для создания динамических стилей:

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>

Альтернатива в виде пользовательских свойств CSS

Для более простых динамических значений предпочитайте пользовательские свойства CSS логике, управляемой свойствами, — это производительнее и уменьшает количество интерполяций 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' }}>

Расширение стилей

Расширьте существующий стилизованный компонент, чтобы добавить стили:

const PrimaryButton = styled(Button)`
  background: royalblue;
  font-weight: bold;
`;

const DangerButton = styled(Button)`
  background: crimson;
`;

Вложенность и селектор &

styled-components поддерживает вложенность в стиле Sass, используя & для ссылки на родительский элемент:

const Nav = styled.nav`
  display: flex;

  & a {
    color: white;
    text-decoration: none;
  }

  & a:hover {
    text-decoration: underline;
  }
`;

createGlobalStyle

Определяйте глобальные стили (сбросы и базовые стили) с помощью 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 root

ThemeProvider

styled-components предоставляет ThemeProvider для доступа к значениям темы в компонентах:

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: 'royalblue' } };

const Button = styled.button`
  background: ${({ theme }) => theme.colors.primary};
`;

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

Аспекты производительности

styled-components создаёт имена классов во время выполнения. Для приложений, критичных к производительности, рассмотрите статическое извлечение с помощью плагина Babel или переход на альтернативы без кода времени выполнения, например Vanilla Extract или CSS Modules.

Рендеринг на стороне сервера

styled-components поддерживает SSR с помощью API ServerStyleSheet, который собирает и внедряет стили во время серверного рендеринга, предотвращая кратковременное отображение содержимого без стилей.

Альтернативы и экосистема

Экосистема styled-components включает: emotion (похожий API), linaria (без кода времени выполнения), Vanilla Extract (типобезопасный), Panda CSS (сначала утилиты). Каждый вариант предлагает свой компромисс между накладными расходами во время выполнения, DX и производительностью.

Быстрая проверка

Как styled-components предотвращает конфликты имён классов между компонентами?

Итоги

styled-components использует тегированные шаблонные литералы для определения CSS рядом с компонентами React. Свойства могут управлять динамическими стилями через интерполяции JavaScript. Компоненты можно расширять, вкладывать и связывать с темой с помощью ThemeProvider. Для рабочей среды рассмотрите плагин Babel для статического извлечения и поддержку рендеринга на стороне сервера. Для альтернатив без кода времени выполнения оцените Vanilla Extract или CSS Modules.

Часто задаваемые вопросы

Урок «Styled-components: литералы шаблонов с тегами» бесплатный?

Да — полный текст урока «Styled-components: литералы шаблонов с тегами» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Styled-components: литералы шаблонов с тегами»?

Создавайте стилизованные компоненты React с помощью литералов шаблонов с тегами и библиотеки styled-components. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Styled-components: литералы шаблонов с тегами»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Styled-components: литералы шаблонов с тегами
  2. Emotion: css() и styled()
  3. Модули CSS: изолированные стили
  4. Vanilla Extract: CSS-in-JS без среды выполнения
← Назад к CSS Academy