How to use Emotion to style you React components

The Next Generation of CSS-in-JS

Nishit Maheta
Nov 14 · 1 min read

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.

Quick Start

Get up and running with a single import.

npm install --save @emotion/core

Example Code

/** @jsx jsx */
import { jsx } from '@emotion/core'

let SomeComponent = props => {
return (
<div
css={{
color: 'hotpink'
}}
{...props}
/>
)
}

Demo Sandbox

Demo Code Sandbox

Examples

Documents

Frequently viewed docs:

GitHub

JavaScript in Plain English

Learn the web's most important programming language.

Nishit Maheta

Written by

Technology Lead At Mobio Solutions. http://mobiosolutions.com/. Follow me on https://www.linkedin.com/in/nishit-mehta/

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade