Features
- css prop for inline style composition
- styled API compatible with styled-components
- Framework-agnostic core (@emotion/css)
- Source maps for debugging styles
- Composition of styles with automatic merging
Pros
- Flexible API options (css prop, styled, className)
- Strong style composition and merging
- Can be used without React (@emotion/css)
Cons
- Runtime overhead for style injection
- Not compatible with React Server Components
- JSX pragma required for css prop (or Babel plugin)
Overview
Emotion is a performant and flexible CSS-in-JS library that provides multiple approaches to styling. The @emotion/styled package offers a styled-components-compatible API, while the css prop and @emotion/css package provide alternative approaches. The framework-agnostic @emotion/css core can be used with any framework.
Emotion’s strength lies in its composition model — styles can be composed, overridden, and merged predictably. The css prop allows you to apply styles directly to elements with full access to your theme, while the styled API creates reusable styled components. Both approaches support dynamic styles based on props.
When to Use
Emotion is suitable for projects that need CSS-in-JS with flexible API options, particularly when style composition is important. Like styled-components, consider zero-runtime alternatives for new projects where React Server Components compatibility and performance are priorities.
Getting Started
npm install @emotion/react/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
const buttonStyle = css`
background: blue;
color: white;
padding: 8px 16px;
border-radius: 4px;
&:hover { background: darkblue; }
`;
function Button() {
return <button css={buttonStyle}>Click me</button>;
}