0Pricing
CSS Academy · Lesson

Emotion: css() and styled()

Apply dynamic styles with Emotion's css() helper and styled() component factory.

Emotion: css() and styled() is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is Emotion?

Emotion is a CSS-in-JS library with a flexible API. It offers two main approaches: the css() function (framework-agnostic) and the styled() API (similar to styled-components). Both auto-generate scoped class names.

Installing Emotion

There are two packages depending on your needs:

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

The css() Function

The css() function generates a class name from a CSS object or template literal:

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 Objects with css()

Object syntax is an alternative to template literals — useful for TypeScript autocompletion:

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

styled() API

Emotion's styled works identically to styled-components for migrating between them:

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 Prop (Inline Styling)

Emotion's css prop lets you write styles directly on JSX elements — no extra component needed. Requires the @emotion/react package and a Babel/SWC plugin:

/** @jsxImportSource @emotion/react */

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

Dynamic Styles with Emotion

Both apis accept functions receiving props for dynamic values:

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

Global Styles

Use Global from @emotion/react for global CSS:

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

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

Emotion vs styled-components

Emotion and styled-components have nearly identical APIs. Emotion has slightly better performance in benchmarks, a smaller bundle size, and the css prop as an additional API. Both are production-proven choices for React apps.

Keyframes in Emotion

Define animations with the keyframes helper:

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;
`;

Server-Side Rendering

Emotion supports SSR through extractCriticalToChunks() for collecting and injecting critical CSS during server rendering in React frameworks like Next.js.

Quick Check

What is the key difference between Emotion's css() function and its styled() API?

Recap

Emotion offers two main styling APIs: css() generates class names (apply via className), and styled() creates styled React components. The css prop enables inline-style-like authoring with full CSS power. Emotion is highly compatible with styled-components in API surface and is often faster. Both approaches auto-scope styles with generated class names.

Frequently asked questions

Is the “Emotion: css() and styled()” lesson free?

Yes — the full text of “Emotion: css() and styled()” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Emotion: css() and styled()”?

Apply dynamic styles with Emotion's css() helper and styled() component factory. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Emotion: css() and styled()” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Styled-components: Tagged Template Literals
  2. Emotion: css() and styled()
  3. CSS Modules: Scoped Styles
  4. Vanilla Extract: Zero-Runtime CSS-in-JS
← Back to CSS Academy