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.
Frequently viewed docs:
Get up and running with a single import.
npm install --save emotionimport { css } from 'emotion'
const app = document.getElementById('root')
const myStyle = css`
color: rebeccapurple;
`
app.classList.add(myStyle)React with Optional Babel Plugin
npm install --save emotion react-emotion babel-plugin-emotionNote: use preact-emotion in place of react-emotion if using Preact
import styled, { css } from 'react-emotion'
const Container = styled('div')`
background: #333;
`
const myStyle = css`
color: rebeccapurple;
`
const app = () => (
<Container>
<p className={myStyle}>Hello World</p>
</Container>
)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
- emotion website [Demo Here]
- next-hnpwa-guide-kit [Demo Here]
- reactivesearch, a react UI library for Elasticsearch [Website]
- circuit-ui, a react component library built at SumUp [Storybook]
- govuk-react, a React component library built for UK Government departments
- open a PR and add yours!
- facepaint
- emotion-vue
- ember-emotion
- CSS to emotion transform
- ShevyJS
- design-system-utils - Utilities to give better access to your design system.