Emotion 9 is currently in beta, there may be breaking changes between versions, for docs on Emotion 8 please go here
The Next Generation of CSS-in-JS
emotion is a high performance, lightweight css-in-js library that supports both string and object based styles.
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>
);- emotion website [Demo Here]
- next-hnpwa-guide-kit [Demo Here]
- open a PR and add yours!
The core idea comes from Sunil Pai’s glam library and its philosophy is laid out here.
-
Styling components with
styled -
Create composable styles with
cssclasses and props -
Combine styles and class names with
cx
- facepaint
- emotion-vue
- CSS to emotion transform
- ShevyJS
- design-system-utils - Utilities to give better access to your design system.