Page Inspect

Emotion – Introduction

🇺🇦 STOP WAR IN UKRAINE 🇺🇦

### Emotion

- Docs
- Community
- GitHub
- Slack
- v10 Docs

# Introduction
✏️ Edit this page

Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

* * *

There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React.

### Framework Agnostic

npm i @emotion/css


**`@emotion/css` documentation**

The @emotion/css package is framework agnostic and the simplest way to use Emotion.

- Requires no additional setup, babel plugin, or other config changes.
- Has support for auto vendor-prefixing, nested selectors, and media queries.
- You simply prefer to use the `css` function to generate class names and `cx` to compose them.
- Server side rendering requires additional work to set up

import { css } from '@emotion/css' const color = 'white' render( <div className={css\` padding: 32px; background-color: hotpink; font-size: 24px; border-radius: 4px; &:hover { color: ${color}; } \`} > Hover to change color. </div> )

import { css } from '@emotion/css'

const color \= 'white'

render(

<div

className\={css\`

padding: 32px;

background-color: hotpink;

font-size: 24px;

border-radius: 4px;

&:hover {

color: ${color};

}

\`}

\>

Hover to change color.

</div\>

)

(Edit code to see changes)

### React

npm i @emotion/react


The @emotion/react package requires React and is recommended for users of that framework if possible.

- Best when using React with a build environment that can be configured.
- `css` prop support

- Similar to the `style` prop, but also has support for auto vendor-prefixing, nested selectors, and media queries.
- Allows developers to skip the `styled` API abstraction and style components and elements directly.
- The `css` prop also accepts a function that is called with your theme as an argument allowing developers easy access to common and customizable values.
- Reduces boilerplate when composing components and styled with emotion.
- Server side rendering with zero configuration.
- Theming works out of the box.
- ESLint plugins available to ensure proper patterns and configuration are set.

**`@emotion/react` css prop documentation**

import { css } from '@emotion/react' const color = 'white' render( <div css={css\` padding: 32px; background-color: hotpink; font-size: 24px; border-radius: 4px; &:hover { color: ${color}; } \`} > Hover to change color. </div> )

import { css } from '@emotion/react'

const color \= 'white'

render(

<div

css\={css\`

padding: 32px;

background-color: hotpink;

font-size: 24px;

border-radius: 4px;

&:hover {

color: ${color};

}

\`}

\>

Hover to change color.

</div\>

)

(Edit code to see changes)

npm i @emotion/styled @emotion/react


The @emotion/styled package is for those who prefer to use the `styled.div` style API for creating components.

**`@emotion/styled` documentation**

import styled from '@emotion/styled' const Button = styled.button\` padding: 32px; background-color: hotpink; font-size: 24px; border-radius: 4px; color: black; font-weight: bold; &:hover { color: white; } \` render(<Button>This my button component.</Button>)

import styled from '@emotion/styled'

const Button \= styled.button\`

padding: 32px;

background-color: hotpink;

font-size: 24px;

border-radius: 4px;

color: black;

font-weight: bold;

&:hover {

color: white;

}

\`

render(<Button\>This my button component.</Button\>)

(Edit code to see changes)

### Browser requirements

Emotion supports all popular browsers and Internet Explorer 11.

### Libraries that Inspired Us

- "original" glam
- glam
- glamor
- styled-components
- glamorous

Search### Getting Started

- Introduction
- Install
- The css Prop
- Styled Components
- Composition
- Object Styles
- Nested Selectors
- Media Queries
- Global Styles
- Package Summaries

### Advanced

- Best Practices
- Keyframes
- Server Side Rendering
- Attaching Props
- Theming
- Labels
- Class Names
- CacheProvider
- Performance
- For Library Authors

### Tooling

- Babel Plugin
- Babel Macros
- Source Maps
- Snapshot Testing
- TypeScript
- eslint-plugin-react

### Packages

- @emotion/react
- @emotion/styled
- @emotion/cache
- @emotion/css
- @emotion/babel-plugin
- @emotion/eslint-plugin
- @emotion/server
- @emotion/jest
- @emotion/native
- @emotion/primitives
- @emotion/babel-preset-css-prop

### Posts

- Emotion 11
- Migrating to Emotion 10