emotion

The Next Generation of CSS-in-JS.

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS.

With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.

👀 Demo Sandbox

📖 Docs

Quick Start

Get up and running with a single import.

npm install --save @emotion/react

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

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

Do I Need To Use the Babel Plugin?

The babel plugin is not required, but enables some optimizations and customizations that could be beneficial for your project.

Look here 👉 emotion babel plugin feature table and documentation

Demo Sandbox

Demo Code Sandbox

Ecosystem

• stylelint - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
• facepaint
• emotion-vue
• nuxt-community/emotion-module - Emotion module for Nuxt.js
• ember-emotion
• CSS to emotion transform
• ShevyJS
• design-system-utils - Utilities to give better access to your design system.
• polished - Lightweight set of Sass/Compass-style mixins/helpers for writing styles in JavaScript.
• monad-ui - Utility First CSS-In-JS
• css-in-js-media - you can deal with responsive design using css-in-js easily with this css-in-js-media which is similar with include-media
• emotion-native-extended - Better styling support for Emotion Native with React Native Extended Stylesheet

Reference

Below are the reference links:

No.	Link
1.	Read more here.
2.	Follow code author here.