How to Use Emotion in React: Styling Components Easily

To use emotion in React, install @emotion/react and @emotion/styled, then create styled components using the styled function or the css prop. Emotion lets you write CSS directly in your JavaScript, making styling dynamic and scoped to components.

Syntax

Emotion provides two main ways to style React components: using the styled function to create styled components, and the css prop for inline styles with dynamic values.

• styled: Wraps an HTML tag or component to create a styled version.
• css prop: Applies styles directly on JSX elements using Emotion's CSS syntax.

jsx

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

const StyledButton = styled.button`
  background-color: hotpink;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
`;

const dynamicStyle = css`
  font-size: 20px;
  margin: 10px;
`;

function App() {
  return (
    <>
      <StyledButton>Click me</StyledButton>
      <button css={dynamicStyle}>Styled with css prop</button>
    </>
  );
}

export default App;

Output

A pink button labeled 'Click me' and a second button with larger font and margin styled using the css prop.

Example

This example shows how to create a styled button with Emotion and use the css prop for dynamic styling based on props.

jsx

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

const Button = styled.button`
  background-color: ${props => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

function App() {
  const dynamicStyle = css`
    font-weight: bold;
    font-size: 18px;
  `;

  return (
    <div>
      <Button primary css={dynamicStyle}>
        Primary Button
      </Button>
      <Button css={dynamicStyle}>Secondary Button</Button>
    </div>
  );
}

export default App;

Output

Two buttons: a blue 'Primary Button' and a gray 'Secondary Button', both bold and sized with the css prop.

Common Pitfalls

Common mistakes when using Emotion in React include:

• Not installing both @emotion/react and @emotion/styled.
• Forgetting to import css from @emotion/react when using the css prop.
• Using the css prop without the Babel plugin or Emotion's JSX pragma, which can cause styles not to apply.
• Mixing Emotion styles with global CSS without proper scoping, leading to unexpected overrides.

jsx

/* Wrong: Missing import of css */
<button css={`color: red;`}>Wrong</button>

/* Right: Import css and use it */
import { css } from '@emotion/react';

<button css={css`color: red;`}>Right</button>

Quick Reference

Feature	Usage	Description
styled	const Comp = styled.tag`styles`;	Create styled React components with scoped CSS.
css prop		Apply styles inline with Emotion's css function.
Dynamic styles	background: ${props => props.color};	Use props to change styles dynamically.
Install packages	npm install @emotion/react @emotion/styled	Required packages for Emotion in React.
Babel plugin	Optional	Improves performance and enables css prop without import.

Key Takeaways

Install both @emotion/react and @emotion/styled to use Emotion in React.

Use the styled function to create reusable styled components easily.

The css prop allows inline dynamic styling with JavaScript expressions.

Always import css from @emotion/react when using the css prop.

Watch for missing imports or Babel setup to avoid styles not applying.