Emotion

Emotion is a modern, performant CSS-in-JS library designed for styling React applications and other JavaScript frameworks. It enables writing styles directly in JavaScript code with flexible syntax, while offering advanced features like dynamic styling, composition, and automatic optimization. Emotion combines the power of traditional CSS with JavaScript logic to create maintainable and performant user interfaces.

Fundamentals

• Dual API: styled components for component-oriented approach, and css prop for more flexible usage
• Automatic generation of unique class names preventing global style conflicts
• Native SSR (Server-Side Rendering) support with optimized CSS extraction
• Powerful theming system via React Context API to manage design tokens

Benefits

• Optimal performance through style generation at compile-time and minimal runtime overhead
• Style co-location with components facilitating code maintenance and understanding
• Dynamic prop-based styling without performance penalties
• Excellent TypeScript support with complete typing for props and theme
• Reduced bundle size (7.9kB gzipped) compared to alternatives like styled-components
• Seamless integration with React development tools and hot reloading support

Practical Example

import { css } from '@emotion/react';
import styled from '@emotion/styled';

// Approach 1: css prop
interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'small' | 'large';
}

const Button: React.FC<ButtonProps> = ({ variant = 'primary', size = 'large', children }) => (
  <button
    css={css`
      padding: ${size === 'small' ? '8px 16px' : '12px 24px'};
      background: ${variant === 'primary' ? '#007bff' : '#6c757d'};
      color: white;
      border: none;
      border-radius: 4px;
      font-weight: 600;
      transition: all 0.2s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      
      &:active {
        transform: translateY(0);
      }
    `}
  >
    {children}
  </button>
);

// Approach 2: styled components
const StyledButton = styled.button<ButtonProps>`
  padding: ${props => props.size === 'small' ? '8px 16px' : '12px 24px'};
  background: ${props => props.theme.colors[props.variant || 'primary']};
  color: white;
  border: none;
  border-radius: ${props => props.theme.radii.md};
  font-weight: 600;
  transition: all 0.2s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
`;

export default Button;

Implementation

1. Install required packages: npm install @emotion/react @emotion/styled
2. Configure JSX pragma for Babel or TypeScript (jsxImportSource: @emotion/react)
3. Create a global theme file defining colors, spacing, and typography
4. Wrap application with ThemeProvider to distribute theme to components
5. Choose between css prop (flexibility) or styled components (encapsulation) based on needs
6. Configure CSS extraction for SSR if needed with createEmotionCache
7. Optimize with Babel plugin @emotion/babel-plugin for better performance

Related Tools

• Facepaint: companion library for easily managing responsive media queries
• Emotion DevTools: Chrome extension to inspect and debug Emotion styles
• Twin.macro: combination of Emotion with Tailwind CSS for the best of both worlds
• Polished: library of CSS helpers (darken, lighten, etc.) compatible with Emotion
• ESLint plugin emotion: linting rules to ensure best practices

Emotion represents a mature and performant solution for React styling, adopted by companies like Atlassian, Reddit, and Coinbase. Its flexibility allows teams to choose the abstraction level suited to their needs, while its rich ecosystem and optimal performance make it a strategic choice for modern applications requiring dynamic and maintainable styling.