Introduction✏️ Edit this page
There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React.
npm i @emotion/css
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
cssfunction to generate class names and
cxto compose them.
Server side rendering requires additional work to set up
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.
Similar to the
styleprop, but also has support for auto vendor-prefixing, nested selectors, and media queries.
Allows developers to skip the
styledAPI abstraction and style components and elements directly.
cssprop 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.
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 supports all popular browsers and Internet Explorer 11.