Emotion Sugar
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
🔧 Install
use yarn:
yarn add @emotion/react emotion-sugar
or use npm:
npm i @emotion/react emotion-sugar