The Next Generation of CSS-in-JS.
npm install @emotion/cssThe @emotion/css package is framework agnostic and the simplest way to use Emotion.
- Quick Start
- API
- Generate Class Names — css
- Global Styles — injectGlobal
- Animation Keyframes — keyframes
- Composing Class Names — cx
- Custom Instances
- Server Side Rendering
- Babel Plugin
Get up and running with a single import.
``bash`
npm install --save @emotion/css
`javascript
import { css } from '@emotion/css'
const app = document.getElementById('root')
const myStyle = css
color: rebeccapurple;
app.classList.add(myStyle)
The css function accepts styles as a template literal, object, or array of objects and returns a class name. It is the foundation of emotion.
#### String Styles
`jsx
// @live
import { css } from '@emotion/css'
const color = 'darkgreen'
render(
background-color: hotpink;
&:hover {
color: ${color};
}
}
>
This has a hotpink background.
#### Object Styles
jsx
// @live
import { css } from '@emotion/css'const color = 'darkgreen'
render(
backgroundColor: 'hotpink',
'&:hover': {
color
}
})}
>
This has a hotpink background.
#### Array of Object Styles
jsx
// @live
import { css } from '@emotion/css'const color = 'darkgreen'
const isDanger = true
render(
{
backgroundColor: 'hotpink',
'&:hover': {
color
}
},
isDanger && {
color: 'red'
}
])}
>
This has a hotpink background.
$3
injects styles into the global scope and is useful for applications such as css resets or font faces.`jsx
import { injectGlobal } from '@emotion/css'injectGlobal
$3
generates a unique animation name that can be used to animate elements with CSS animations.String Styles
`jsx
// @live
import { css, keyframes } from '@emotion/css'const bounce = keyframes
40%, 43% {
transform: translate3d(0, -30px, 0);
}
70% {
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0,-4px,0);
}
render(
width: 96px;
height: 96px;
border-radius: 50%;
animation: ${bounce} 1s ease infinite;
transform-origin: center bottom;
}`
src={logoUrl}
/>
)
Object Styles
`jsx
// @live
import { css, keyframes } from '@emotion/css'
const bounce = keyframes({
'from, 20%, 53%, 80%, to': {
transform: 'translate3d(0,0,0)'
},
'40%, 43%': {
transform: 'translate3d(0, -30px, 0)'
},
'70%': {
transform: 'translate3d(0, -15px, 0)'
},
'90%': {
transform: 'translate3d(0, -4px, 0)'
}
})
render(
className={css({
width: 96,
height: 96,
borderRadius: '50%',
animation: ${bounce} 1s ease infinite,`
transformOrigin: 'center bottom'
})}
/>
)
cx is emotion's version of the popular classnames library. The key advantage of cx is that it detects emotion generated class names ensuring styles are overwritten in the correct order. Emotion generated styles are applied from left to right. Subsequent styles overwrite property values of previous styles.
Combining class names
`jsx
import { cx, css } from '@emotion/css'
const cls1 = css
font-size: 20px;
background: green;
const cls2 = css
font-size: 20px;
background: blue;
Conditional class names
jsx
const cls1 = css
const cls2 = cssconst foo = true
const bar = false
{ [cls1]: foo },
{ [cls2]: bar }
)}
/>
Using class names from other sources
jsx
const cls1 = css
/>
Custom Instances
With
, you can provide custom options to Emotion's cache.The main
@emotion/css entrypoint can be thought of as a call to @emotion/css/create-instance with sensible defaults for most applications.`javascript
import createEmotion from '@emotion/css/create-instance'export const {
flush,
hydrate,
cx,
merge,
getRegisteredStyles,
injectGlobal,
keyframes,
css,
sheet,
cache
} = createEmotion()
`$3
- Calling it directly will allow for some low level customization.
- Create custom names for emotion APIs to help with migration from other, similar libraries.
- Could set custom
to something other than css$3
- Introduces some amount of complexity to your application that can vary depending on developer experience.
- Required to keep up with changes in the repo and API at a lower level than if using
directly$3
- Using emotion in embedded contexts such as an
- Setting a nonce on any
tag emotion creates for security purposes- Use emotion with a container different than
document.head for style elements- Using emotion with custom stylis plugins
Multiple instances in a single app example
`jsx
import createEmotion from '@emotion/css/create-instance'export const {
flush,
hydrate,
cx,
merge,
getRegisteredStyles,
injectGlobal,
keyframes,
css,
sheet,
cache
} = createEmotion({
// The key option is required when there will be multiple instances in a single app
key: 'some-key'
})
`Options
accepts the same options as createCache from @emotion/cache`.