Skip to main content

Emotion

Emotion is a popular library in the React ecosystem that allows developers to style components using CSS-in-JS (CSS in JavaScript). It provides powerful and flexible styling capabilities, enabling you to write styles directly within your JavaScript or TypeScript files. Emotion supports both inline styles and styled components, giving you the freedom to choose the approach that best fits your project.

Why Use Emotion?​

One of the key advantages of Emotion is that it allows for highly dynamic and maintainable styles. Since your styles are written in JavaScript, you can leverage all the power of the language, such as variables, functions, and conditional logic. This makes it easier to create styles that adapt to different states and conditions within your components.

Emotion also enables you to scope your styles to specific components, reducing the likelihood of style conflicts and making your codebase easier to maintain. Moreover, it offers a high degree of customization and performance optimization, which can be beneficial for large applications.

Getting Started with Emotion​

To start using Emotion in a React project, you first need to install it. You can do this via npm or yarn:

npm install @emotion/react @emotion/styled

Or if you prefer using yarn:

yarn add @emotion/react @emotion/styled

Writing Inline Styles with Emotion​

Emotion allows you to write inline styles using the css function. This function is imported from @emotion/react and used to create style objects that can be applied to components.

Here's an example:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

function Button({ label }) {
  // Define a style using the css function
  const buttonStyle = css`
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;

    // Add a hover state with a darker background
    &:hover {
      background-color: #0056b3;
    }
  `;

  return (
    // Apply the style to the button using the css prop
    <button css={buttonStyle}>
      {label}
    </button>
  );
}

export default Button;

In this example, the Button component has a set of styles defined using the css function. The styles include a hover effect, which is applied conditionally using CSS pseudo-classes.

Styled Components with Emotion​

Another powerful feature of Emotion is the ability to create styled components. This is done using the styled function, which is imported from @emotion/styled. Styled components allow you to encapsulate styles directly within your components, making your code more modular and easier to manage.

Here's how you can create a styled component:

import styled from '@emotion/styled';

// Create a styled button component
const StyledButton = styled.button`
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #218838;
  }
`;

function App() {
  return (
    <div>
      <StyledButton>Click Me</StyledButton>
    </div>
  );
}

export default App;

In this example, StyledButton is a button component with styles defined directly in the component declaration. This makes it easy to reuse the styled button throughout your application.

Key Concepts to Remember​

  • Dynamic Styling: Since styles are written in JavaScript, you can use variables, functions, and conditional logic to create dynamic styles.

  • Scoped Styles: Styles created with Emotion are scoped to the component, preventing conflicts and making maintenance easier.

  • Performance Optimization: Emotion optimizes your styles by generating minimal and efficient CSS that is injected into the document head.

Further Reading​

To deepen your understanding of Emotion and related topics, consider exploring the following:

  • CSS-in-JS vs. Traditional CSS
  • Advanced Emotion Techniques
  • Comparison of Emotion with Other CSS-in-JS Libraries
  • Theming with Emotion

Summary​

Emotion is a powerful tool in the React ecosystem for applying CSS-in-JS. It allows for dynamic and scoped styling through the use of JavaScript, making styles more maintainable and less prone to conflicts. By utilizing Emotion’s css and styled functions, developers can create flexible and optimized styles that enhance the overall development experience.