Emotion Sugar

🍭 A set of pleasant utilities for emotion

Emotion is a performant and flexible CSS-in-JS library.
This Library provides a set of utilities for emotion, or rather, it makes emotion utility-first.

🧋 Let's make emotion more delight

Write style with emotion:

import { css, jsx } 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>
)

Write style with emotion and add some sugar:

import { jsx } from '@emotion/react'
import { p, color } from 'emotion-sugar'

const textColor = 'white'

render(
  <div css={p(32).bg('hotpink').text(24).rounded(4).hover(color(textColor))}>
    Hover to change color.
  </div>
)

🌠 Features

🧩 Seamless integration with emotion： Use it in existing emotion projects as you like.
🛡️ Typed: Full support for TypeScript
🍸 Less code: It is far less code than native css
🍩 Flex tooltips: Let's make a flex container by intuition

🔧 Install

use yarn:

yarn add @emotion/react emotion-sugar

or use npm:

npm i @emotion/react emotion-sugar