Description #
Emotion is a performant and flexible CSS-in-JS library that allows you to style applications using JavaScript or TypeScript. It enables scoped, dynamic styling with familiar CSS syntax and full theming support.
History #
Emotion was released in 2017 by developers including Mitchell Hamilton, aiming to combine the best of CSS-in-JS techniques with great performance, extensibility, and developer ergonomics. It has become a popular choice in React-based ecosystems.
Hello World Code #
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
const style = css`
color: hotpink;
`
function App() {
return <h1 css={style}>Hello, World!</h1>
}How to Run #
Option 1: Online
Try it in the Emotion CodeSandbox:
https://codesandbox.io/s/emotion-react-starter-0k4q3
Option 2: Local
Install with npm:
npm install @emotion/reactThen use within a React component as shown above.
Key Concepts #
- CSS-in-JS: Write styles within JS/TS files
- Tagged template literals and object syntax
- Scoped styles by default
- Supports theming via React Context
- Works with styled-components-like API (
@emotion/styled) - Compatible with server-side rendering (SSR)
- Built-in support for media queries and pseudo-selectors
- Zero-runtime option with Babel plugin
- Great for design systems and React apps
- Fully typed with TypeScript support
Try It Online #
https://codesandbox.io/s/emotion-react-starter-0k4q3
Fun Facts #
- Emotion is widely used in tools like Theme UI, Chakra UI, and many design systems.
- Its performance and flexibility make it a top choice for modern frontend projects.
- The library name reflects its goal: to make styling expressive and enjoyable.
Resources #
Official site
Docs or tutorial
GitHub or interpreter
Community or learning resources
