Top Related Projects
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Documentation about css-modules
JSS is an authoring tool for CSS which uses JavaScript as a host language.
Zero-runtime CSS in JS library
Quick Overview
Emotion is a popular CSS-in-JS library for styling React components. It provides a powerful and flexible way to write component-level styles with JavaScript, offering great performance and a developer-friendly API.
Pros
- High performance due to efficient style injection and caching
- Supports both string and object styles, providing flexibility
- Excellent TypeScript support
- Seamless integration with React and other libraries
Cons
- Learning curve for developers new to CSS-in-JS
- Potential for style duplication if not managed properly
- Debugging can be more challenging compared to traditional CSS
- Requires additional setup and tooling
Code Examples
Basic usage with the css
prop:
import { css } from '@emotion/react'
const style = css`
color: hotpink;
`
const SomeComponent = ({ children }) => (
<div css={style}>
{children}
</div>
)
Using the styled
API:
import styled from '@emotion/styled'
const Button = styled.button`
background-color: ${props => props.primary ? 'blue' : 'gray'};
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
`
const App = () => (
<div>
<Button>Normal Button</Button>
<Button primary>Primary Button</Button>
</div>
)
Global styles with Global
component:
import { Global, css } from '@emotion/react'
const globalStyles = css`
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
`
const App = () => (
<>
<Global styles={globalStyles} />
{/* Rest of your app */}
</>
)
Getting Started
-
Install Emotion:
npm install @emotion/react @emotion/styled
-
If using Create React App, you're ready to go. For other setups, add the Emotion babel preset to your Babel configuration:
{ "presets": ["@emotion/babel-preset-css-prop"] }
-
Start using Emotion in your React components:
import { css } from '@emotion/react' const MyComponent = () => ( <div css={css` background-color: lightgray; padding: 20px; border-radius: 4px; `} > Hello, Emotion! </div> )
Competitor Comparisons
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Pros of styled-components
- More mature ecosystem with extensive documentation and community support
- Better TypeScript integration out of the box
- Native mobile support through React Native
Cons of styled-components
- Slightly larger bundle size
- Slower runtime performance in some scenarios
- Less flexible API for advanced use cases
Code Comparison
styled-components:
const Button = styled.button`
background-color: ${props => props.primary ? 'blue' : 'white'};
color: ${props => props.primary ? 'white' : 'blue'};
padding: 10px 20px;
`;
emotion:
const Button = styled.button`
background-color: ${props => props.primary ? 'blue' : 'white'};
color: ${props => props.primary ? 'white' : 'blue'};
padding: 10px 20px;
`;
Both libraries offer similar syntax for creating styled components, with minor differences in advanced features and performance optimizations. emotion provides more flexibility in configuration and usage patterns, while styled-components offers a more opinionated approach with stronger ecosystem support. The choice between the two often comes down to specific project requirements and personal preference.
Documentation about css-modules
Pros of CSS Modules
- Simpler learning curve for developers familiar with traditional CSS
- Better separation of concerns between styles and JavaScript
- Works well with existing CSS tooling and preprocessors
Cons of CSS Modules
- Requires additional build configuration and tooling
- Limited runtime manipulation of styles
- Less flexibility for dynamic styling based on props or state
Code Comparison
CSS Modules:
/* styles.module.css */
.button {
background-color: blue;
color: white;
}
import styles from './styles.module.css';
const Button = () => <button className={styles.button}>Click me</button>;
Emotion:
import { css } from '@emotion/react';
const buttonStyle = css`
background-color: blue;
color: white;
`;
const Button = () => <button css={buttonStyle}>Click me</button>;
Both CSS Modules and Emotion offer solutions for scoped CSS in React applications. CSS Modules provides a more traditional CSS approach with automatic scoping, while Emotion offers a more flexible, JavaScript-centric styling solution with runtime capabilities. The choice between them often depends on project requirements, team preferences, and the need for dynamic styling.
JSS is an authoring tool for CSS which uses JavaScript as a host language.
Pros of JSS
- More flexible and customizable, allowing for dynamic styles and plugins
- Better performance for large-scale applications due to its optimized runtime
- Supports server-side rendering out of the box
Cons of JSS
- Steeper learning curve, especially for developers new to CSS-in-JS
- Requires more setup and configuration compared to Emotion
- Less intuitive syntax for simple styling tasks
Code Comparison
Emotion:
import { css } from '@emotion/react'
const style = css`
color: hotpink;
font-size: 24px;
`
const Component = () => <div css={style}>Hello, World!</div>
JSS:
import { createUseStyles } from 'react-jss'
const useStyles = createUseStyles({
myStyle: {
color: 'hotpink',
fontSize: 24
}
})
const Component = () => {
const classes = useStyles()
return <div className={classes.myStyle}>Hello, World!</div>
}
Both Emotion and JSS are popular CSS-in-JS libraries, each with its own strengths. Emotion offers a more straightforward API and is easier to adopt, while JSS provides more advanced features and better performance for complex applications. The choice between them often depends on project requirements and team preferences.
Zero-runtime CSS in JS library
Pros of Linaria
- Zero runtime, CSS is extracted at build time
- Works with server-side rendering out of the box
- Supports CSS preprocessing with PostCSS
Cons of Linaria
- Requires additional build configuration
- Limited dynamic styling capabilities compared to Emotion
- Smaller ecosystem and community support
Code Comparison
Emotion:
import { css } from '@emotion/react'
const style = css`
color: hotpink;
`
const SomeComponent = ({ children }) => (
<div css={style}>{children}</div>
)
Linaria:
import { styled } from '@linaria/react'
const StyledDiv = styled.div`
color: hotpink;
`
const SomeComponent = ({ children }) => (
<StyledDiv>{children}</StyledDiv>
)
Both Emotion and Linaria are CSS-in-JS libraries, but they have different approaches. Emotion focuses on runtime styling with a larger ecosystem, while Linaria emphasizes zero-runtime CSS extraction. Emotion offers more flexibility for dynamic styling, whereas Linaria provides better performance due to its build-time CSS generation. The choice between the two depends on project requirements, with Emotion being more suitable for highly dynamic styles and Linaria excelling in static styling scenarios with a focus on performance.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
emotion
The Next Generation of CSS-in-JS
Emotion 11 has been released ð See the blog post
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.
ð Demo Sandbox
ð Docs
Frequently viewed docs:
Quick Start
Get up and running with a single import.
npm install --save @emotion/react
/** @jsx jsx */
import { jsx } from '@emotion/react'
let SomeComponent = props => {
return (
<div
css={{
color: 'hotpink'
}}
{...props}
/>
)
}
Do I Need To Use the Babel Plugin?
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
Demo Sandbox
Examples
- 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]
- open a PR and add yours!
Ecosystem
- stylelint - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
- facepaint
- emotion-vue
- nuxt-community/emotion-module - Emotion module for Nuxt.js
- ember-emotion
- CSS to emotion transform
- ShevyJS
- design-system-utils - Utilities to give better access to your design system.
- polished - Lightweight set of Sass/Compass-style mixins/helpers for writing styles in JavaScript.
- monad-ui - Utility First CSS-In-JS
- css-in-js-media - you can deal with responsive design using css-in-js easily with this
css-in-js-media
which is similar with include-media - emotion-native-extended - Better styling support for Emotion Native with React Native Extended Stylesheet
In the Wild
- feathery.io
- frontity.org
- abacusfi.com
- healthline.com
- nytimes.com
- vault.crucible.gg
- render.com
- gatsbythemes.com
- blazity.com
- postmates.com
- thedisconnect.co
- zefenify.com
- sentry.io
- comparett.com
- Domain.com.au
- cyberhaven.com
- CommercialRealEstate.com.au
- codecademy.com
- Apache Superset
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
Backers
Thank you to all our backers! ð [Become a backer]
Contributors
This project exists thanks to all the people who contribute. [Contribute].
Top Related Projects
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Documentation about css-modules
JSS is an authoring tool for CSS which uses JavaScript as a host language.
Zero-runtime CSS in JS library
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot