CSS Academy · Урок

Emotion: css() и styled()

Применяйте динамические стили с помощью вспомогательной функции css() и фабрики компонентов styled() из Emotion.

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

Что такое Emotion?

Emotion — библиотека CSS-in-JS с гибким программным интерфейсом. Она предлагает два основных подхода: функцию css() (не зависящую от фреймворка) и API styled() (аналогичный styled-components). Оба подхода автоматически создают имена классов с локальной областью действия.

Установка Emotion

В зависимости от ваших потребностей доступны два пакета:

npm install @emotion/react    # css prop and Global
npm install @emotion/styled   # styled() API
npm install @emotion/css      # framework-agnostic

Функция css()

Функция css() создаёт имя класса из объекта CSS или шаблонного литерала:

import { css } from '@emotion/css';

const buttonStyle = css`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
`;

function Button({ children }) {
  return <button className={buttonStyle}>{children}</button>;
}

Объекты CSS с помощью css()

Синтаксис объектов — альтернатива шаблонным литералам, полезная для автодополнения TypeScript:

const cardStyle = css({
  background: 'white',
  borderRadius: '8px',
  padding: '24px',
  boxShadow: '0 4px 16px rgba(0,0,0,0.1)'
});

Программный интерфейс styled()

styled в Emotion работает так же, как styled-components, что упрощает переход между ними:

import styled from '@emotion/styled';

const Card = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
`;

const FeaturedCard = styled(Card)`
  border: 2px solid gold;
`;

Свойство css (встроенная стилизация)

Свойство css в Emotion позволяет записывать стили непосредственно в элементах JSX — без дополнительного компонента. Требуются пакет @emotion/react и плагин Babel/SWC:

/** @jsxImportSource @emotion/react */

function Component() {
  return (
    <div css={{ background: 'white', padding: '24px' }}>
      Content
    </div>
  );
}

Динамические стили с Emotion

Оба программных интерфейса принимают функции, получающие свойства для вычисления динамических значений:

const Badge = styled.span`
  background: ${({ variant }) => variant === 'error' ? 'crimson' : 'royalblue'};
  color: white;
  padding: 2px 8px;
  border-radius: 9999px;
`;

Глобальные стили

Используйте Global из @emotion/react для глобального CSS:

import { Global, css } from '@emotion/react';

function App() {
  return (
    <>
      <Global styles={css`
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; }
      `} />
    </>
  );
}

Emotion и styled-components

Emotion и styled-components имеют почти идентичные программные интерфейсы. В тестах производительности Emotion немного быстрее, отличается меньшим размером сборки и предоставляет свойство css как дополнительный программный интерфейс. Оба решения проверены в производственных приложениях React.

Ключевые кадры в Emotion

Определяйте анимации с помощью вспомогательной функции keyframes:

import { keyframes, css } from '@emotion/react';

const bounce = keyframes`
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
`;

const animated = css`
  animation: ${bounce} 1s ease-in-out infinite alternate;
`;

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

Emotion поддерживает SSR с помощью extractCriticalToChunks(), который собирает и внедряет критически важный CSS во время серверного рендеринга в фреймворках React, таких как Next.js.

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

В чём заключается ключевое различие между функцией css() и API styled() в Emotion?

Повторение

Emotion предлагает два основных программных интерфейса для стилизации: css() создаёт имена классов (применяйте их через className), а styled() создаёт стилизованные компоненты React. Свойство css позволяет писать стили почти как встроенные, сохраняя все возможности CSS. Emotion хорошо совместим со styled-components на уровне программного интерфейса и часто работает быстрее. Оба подхода автоматически ограничивают область действия стилей с помощью созданных имён классов.

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

Урок «Emotion: css() и styled()» бесплатный?

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

Чему я научусь в уроке «Emotion: css() и styled()»?

Применяйте динамические стили с помощью вспомогательной функции css() и фабрики компонентов styled() из Emotion. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Emotion: css() и styled()»?

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

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

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

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

← Назад к CSS Academy