Emotion CSS
Emotion is a performant CSS-in-JS library for JavaScript and React that allows writing styles as template literals or JavaScript objects, with support for both the styled-component pattern and a css prop.
Definition
Emotion is a performant CSS-in-JS library for JavaScript and React that allows writing styles as template literals or JavaScript objects, with support for both the styled-component pattern and a css prop.
Overview
Emotion offers largely the same core idea as styled-components — writing CSS alongside component code and getting automatically scoped class names — but with a couple of additional flexible APIs: a `css` prop that lets any element receive inline-defined styles without creating a separate styled component, and support for writing styles as plain JavaScript objects in addition to tagged template literals. Emotion is designed with performance and bundle size in mind, and it powers the styling layer inside several popular component libraries, including Material UI, which uses Emotion internally for its default styling engine. It also supports server-side rendering with critical CSS extraction, which matters for frameworks doing SSR such as Next.js. Because Emotion and styled-components solve the same problem with very similar developer experiences, they are frequently compared side by side; some teams pick Emotion specifically because a component library they depend on (like Material UI) is already built on it, keeping the styling approach consistent across custom and third-party components.
Key Features
- css prop for applying styles to any element without a separate styled component
- Support for both tagged template literals and JavaScript object styles
- Automatically scoped, collision-free generated class names
- Optimized for small bundle size and runtime performance
- Server-side rendering support with critical CSS extraction
- Used internally as the styling engine for libraries like Material UI