Emotion

Emotion is a library for writing CSS with JavaScript. It has a framework-agnostic package and a React package that adds a css prop.

The css function returns class names from string or object styles, and the cx helper composes them. The React package adds a css prop, which lets you style elements directly without wrapping them in a styled component. Both packages support vendor prefixing, nested selectors and media queries. Theming works out of the box, and the css prop can take a function that receives the theme, so values stay consistent across the app.

• Framework-agnostic css function
• React css prop for direct styling
• Theming with a theme function
• Source maps and labels for debugging
• ESLint plugins for setup checks

Developers who want style composition in JavaScript and teams that prefer a css prop over styled components. React teams that use a build setup will find the React package the most convenient.

Emotion is open source under the MIT license, so it is free to use. The framework-agnostic package needs extra setup for server-side rendering, while the React package works with zero configuration for that. The project includes testing utilities, so you can check styles in your test suite.