Skip to main content

Emotion

Emotion is a popular CSS-in-JS library for styling React components. It enables you to write CSS directly in your JavaScript code, making it easy to create reusable, scoped styles for your components. Emotion offers a similar API to styled-components, with additional performance optimizations and features. In this tutorial, we'll learn how to use Emotion in React applications, along with sample code, explanations, and best practices.

Setting up Emotion​

To use Emotion in your React project, you first need to install the necessary packages:

npm install @emotion/react @emotion/styled

Creating Styled Components​

With Emotion, you can create styled React components using tagged template literals. You write your CSS as a template literal, and Emotion generates a unique class name for your styles, ensuring they are scoped to the component.

Here's an example of creating a styled button component:

JavaScript
import React from 'react';
import styled from '@emotion/styled';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
`;

function CustomButton() {
  return <StyledButton>Click me</StyledButton>;
}

export default CustomButton;

In this example, we imported the styled object from the @emotion/styled package and created a StyledButton component with the desired styles. We then used the StyledButton component in our CustomButton component.

Props and Theming​

Emotion allows you to use props in your styles and create themes to manage global styles across your application.

Here's an example of using props and theming with Emotion:

JavaScript
// theme.js
export const theme = {
  primaryColor: 'blue',
  secondaryColor: 'green',
};

// CustomButton.js
import React from 'react';
import styled from '@emotion/styled';

const StyledButton = styled.button`
  background-color: ${props => props.theme.primaryColor};
  color: white;
  padding: 10px;
  border-radius: 5px;
`;

function CustomButton() {
  return <StyledButton>Click me</StyledButton>;
}

export default CustomButton;

In this example, we created a theme.js file to store our theme colors and used the theme in our StyledButton component. We also demonstrated how to access props in our styles using a function.

Best Practices​

When using Emotion in React, it's essential to follow best practices to ensure maintainable and efficient code:

  1. Keep components small and focused: Create small, focused styled components that do one thing well. This makes your code more modular and maintainable.
  2. Use theming for global styles: Use Emotion's theming capabilities to manage global styles across your application.
  3. Combine with other styling solutions: You can combine Emotion with other styling solutions like CSS Modules or inline styles, depending on your needs and preferences.

Conclusion​

Emotion is a powerful and flexible CSS-in-JS library for styling React components. It allows you to write CSS directly in your JavaScript code, making it easy to create reusable, scoped styles for your components. With features like props and theming, Emotion can help you build organized, modular, and maintainable React applications with ease.