CSS-in-JS: Styled-components и Emotion
Пишите стили компонентов в виде шаблонных строк с тегами в styled-components или используйте свойство css в Emotion, применяя props для динамических стилей.
«CSS-in-JS: Styled-components и Emotion» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое CSS-in-JS
CSS-in-JS записывает стили компонентов непосредственно в JavaScript/TypeScript. Стили располагаются рядом с компонентами, поддерживают динамические значения из свойств и автоматически ограничиваются областью действия. Две самые популярные библиотеки — styled-components и Emotion.
Основы styled-components
Используйте помеченные шаблонные литералы для определения стилизованных компонентов. В результате получается компонент React, который отображает элемент HTML с применёнными стилями.
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 — свойство css
Свойство css библиотеки Emotion применяет стили к любому элементу JSX. Для этого требуется прагма @emotion/react или пресет 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>
);
}Динамические стили из свойств
Обе библиотеки могут читать свойства для вычисления стилей. Это их главное преимущество перед статическим CSS — переключать классы не нужно.
Тематизация с ThemeProvider
И styled-components, и Emotion поддерживают ThemeProvider, который передаёт значения темы всем стилизованным компонентам.
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;
`;Расширение стилизованных компонентов
Расширяйте существующий стилизованный компонент, чтобы создать вариант без дублирования стилей.
const Button = styled.button`
padding: 8px 16px;
border-radius: 4px;
`;
const DangerButton = styled(Button)`
background: #e53e3e;
color: white;
`;Глобальные стили
Используйте createGlobalStyle (styled-components) или Global (Emotion) для глобального CSS, например стилей body и сбросов.
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; }
`;
<><GlobalStyle /><App /></>Затраты CSS-in-JS во время выполнения
Библиотеки CSS-in-JS внедряют стили во время выполнения через JavaScript. Это увеличивает затраты CPU на разбор и внедрение стилей, а также размер пакета JavaScript. Альтернативы без затрат во время выполнения (vanilla-extract, linaria) создают статический CSS на этапе сборки.
Альтернативы без затрат во время выполнения
vanilla-extract: стили пишутся на TypeScript и компилируются в статический CSS. linaria: синтаксис CSS-in-JS компилируется в CSS Modules. Оба решения обеспечивают удобство CSS-in-JS без затрат во время выполнения.
TypeScript со styled-components
Определите ThemeType и расширьте интерфейс DefaultTheme из styled-components, чтобы получить полностью типизированные темы.
import 'styled-components';
import { theme } from './theme';
declare module 'styled-components' {
export interface DefaultTheme extends typeof theme {}
}Когда выбирать CSS-in-JS
CSS-in-JS отлично подходит для динамических стилей, управляемых значениями JavaScript во время выполнения, систем дизайна с высокими требованиями к тематизации и команд, предпочитающих рабочие процессы с приоритетом JavaScript. Затраты во время выполнения обычно приемлемы для интерфейсов, не критичных к производительности.
Быстрая проверка
Каков главный компромисс библиотек CSS-in-JS, работающих во время выполнения, по сравнению со статическими решениями CSS?
Повторение: CSS-in-JS
Styled-components: помеченные шаблонные литералы, отображающие стилизованный элемент React. Emotion: свойство css или интерфейс styled. Динамические стили из свойств устраняют переключение классов. ThemeProvider передаёт значения темы. createGlobalStyle используется для глобального CSS. Затраты во время выполнения — главный компромисс. Альтернативы без таких затрат: vanilla-extract, linaria.
Часто задаваемые вопросы
Урок «CSS-in-JS: Styled-components и Emotion» бесплатный?
Да — полный текст урока «CSS-in-JS: Styled-components и Emotion» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «CSS-in-JS: Styled-components и Emotion»?
Пишите стили компонентов в виде шаблонных строк с тегами в styled-components или используйте свойство css в Emotion, применяя props для динамических стилей. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «CSS-in-JS: Styled-components и Emotion»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Методология BEM: Block, Element, Modifier
- CSS Modules: изолированные имена классов
- CSS-in-JS: Styled-components и Emotion
- Tailwind CSS: подход utility-first