ReactJS by Facebook is a widely used JavaScript library by React development companies for developing robust and responsive user interfaces. Its component-based architecture offers several options for styling React components, such as traditional CSS and CSS-in-JS solutions. CSS-in-JS libraries combine the flexibility of JavaScript with the elegance of CSS. It offers an innovative component-focused styling approach, increasing the styling performance in React applications. In this blog post, we’ll discuss Emotion ReactJS, the most prevalent CSS-in-JS library, offering a powerful solution for styling React applications.

We’ll understand what it is, its installation, its characteristics, and its advantages. We’ll even compare Emotion with other styled components to determine which might be more suitable. So, if you want to build a visually appealing UI, this blog will provide comprehensive insights into understanding Emotion effectively.

1. What is Emotion?

Emotion is a high-performing and flexible library for styling React applications using CSS-in-JS. It enables you to style the React components directly within JavaScript by writing CSS in JavaScript code using traditional CSS-like syntax.

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
const buttonStyle = css`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  &:hover {
	background-color: #0056b3;
  }
`;

function App() {
  return (
	

  	Click Me
	
  );
}

export default App;

Emotion is implemented as a collection of NPM packages, with each package serving a specific purpose. This modular approach provides flexibility in selecting the package according to the features you want to include in your application. The following are the significant packages within the Emotion library:

• @emotion/react – This is the core package for using the Emotion library with React. It is used for writing styles and integrates seamlessly with React components.
• @emotion/styled – You can create styled components using this package by specifying the HTML element name along with its associated styles. This is similar to another popular CSS-in-JS library, styled-components.
• @emotion/css – You can use this library to write CSS styles under a randomized className at runtime without React or any other framework dependency. If you prefer not to use advanced React features, go for this library.

2. How to Install EmotionJS?

Create a fresh React app using Vite because CRA (create-react-app) is deprecated.

npm create vite@latest

or

yarn create vite

Now, install emotion in your Vite app (if using VS Code, then use it terminal, otherwise use CMD)

npm install @emotion/react @emotion/styled

Use JSX Pragma

/** @jsxImportSource @emotion/react */  	//note: to make it work without config 
/** @jsxImportSource @emotion/react */     
import {css} from '@emotion/react'; 
 
const color = 'white'; 
 
const EmotionComponent = () => { 
  return ( 
    
 
      Hover to change color. 
    
 
  ); 
}; 
 
export default EmotionComponent; 

Alternative (Optional): Vite-specific JSX Runtime

If you prefer not to use the pragma comment, configure jsxImportSource in vite.config.js:

import react from '@vitejs/plugin-react'; 
import { defineConfig } from 'vite'; 
 
// https://vite.dev/config/ 
export default defineConfig({ 
  plugins: [ 
    react({ 
      jsxImportSource: '@emotion/react', 
    }), 
  ], 
  server: { 
    port: '3000', 
  }, 
}); 

Output:

3. How to Style with Emotion ReactJS?

Let us now explore the different methods to style with Emotion:

3.1 Method 1: Using Styled (Like Styled-Components)

Styled is a way to create React components that have styles attached to them. It’s available from @emotion/styled. Styled was heavily inspired by styled-components and glamorous. 

Styled is very similar to CSS, except you call it with an HTML tag or React component and then call that with a template literal for string styles or a regular function call for object styles.

Install the @emotion/styled library using yarn or npm. Follow the example below.

import styled from '@emotion/styled'; 
 
const Button = styled.button` 
  background: #4caf50; 
  color: white; 
  padding: 10px 20px; 
  border: none; 
  border-radius: 4px; 
  cursor: pointer; 
  &:hover { 
    background: #45a049; 
  } 
`; 
 
const EmotionStyledComponent = () => { 
  return Click Me; 
}; 
 
export default EmotionStyledComponent; 

3.2 Method 2: Using CSS Prop (Inline-Like Styling)

The primary way to style elements with emotion is the CSS prop. It provides a concise and flexible API to style your components.

import { css } from '@emotion/react'; 
 
const buttonStyle = css` 
  background: #4caf50; 
  color: white; 
  padding: 10px 20px; 
  border: none; 
  border-radius: 4px; 
  &:hover { 
    background: #45a049; 
  } 
`; 
 
const EmotionCssComponent = () => { 
  return Click Me; 
}; 
 
export default EmotionCssComponent;

Output:

3.3 Advanced Styling with EmotionJS

Below are some advanced-level styling methods for Emotion ReactJS.

1. Dynamic Styling with Props 

Any interpolations or arguments that are functions in styled are called with props, this allows you to change the styles of a component based on the props.

import styled from '@emotion/styled'; 
const DynamicButton = styled.button` 
  background: ${(props) => (props.primary ? '#4CAF50' : '#f1f1f1')}; 
  color: ${(props) => (props.color ? props.color : 'black')}; 
  padding: 10px 20px; 
`; 
 
const EmotionDynamicStyleProps = () => { 
  return ( 
     
       
        Primary 
       
      Secondary 
    > 
  ); 
}; 
 
export default EmotionDynamicStyleProps;

Output:

2. Global Styles (Like CSS Reset) 

Sometimes you might want to insert global CSS like resets or font faces. You can use the Global component to do this. It accepts a styles prop, which accepts the same values as the CSS prop, except it inserts styles globally. Global styles are also removed when the styles change or when the Global component unmounts.

import { css, Global } from '@emotion/react'; 
 
const globalStyles = css` 
  body { 
    margin: 0; 
    font-family: Arial; 
  } 
`; 
 
const buttonStyle = css` 
  background: #4caf50; 
  color: white; 
  padding: 10px 20px; 
  border: none; 
  border-radius: 4px; 
  &:hover { 
    background: #45a049; 
  } 
`; 
 
const EmotionCssComponent = () => { 
  return ( 
     
       
      Click Me; 
    > 
  ); 
}; 
 
export default EmotionCssComponent;

Note: If styles are not applied, then there are conflicts in your app with the previous CSS code. To overcome this, use can use this in the root file like main.jsx or index.jsx like this.

import { Global, css } from '@emotion/react'; 
import { StrictMode } from 'react'; 
import { createRoot } from 'react-dom/client'; 
import App from './App.jsx'; 
import './index.css'; 
const globalStyles = css` 
  * { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
  } 
  body { 
    margin: 0; 
    font-family: Arial; 
    padding: 10px; 
    background: red; 
  } 
`; 
createRoot(document.getElementById('root')).render( 
   
     
     
   
);

3. Theming Support 

Add ThemeProvider to the top level of your app and access the theme with props.theme in a styled component, or provide a function that accepts the theme as the CSS prop.

import { ThemeProvider } from '@emotion/react'; 
import styled from '@emotion/styled'; 
import './App.css'; 
 
const theme = { 
  colors: { 
    primary: '#4CAF50', 
    secondary: '#f1f1f1', 
  }, 
}; 
 
const ThemedButton = styled.button` 
  background: ${(props) => props.theme.colors.primary}; 
  color: white; 
  border-radius: 5px; 
  padding: 10px; 
`; 
 
 
function App() { 
  return ( 
     
      Themed Button 
     
  ); 
} 
export default App;

Output:

4. Media Queries

Using media queries in Emotion is similar to how we would use them in regular CSS. However, with Emotion, you can inject the styles directly into the component using the css prop along with the CSS-tagged template literal or through the @emotion/react package.

import { css } from '@emotion/react'; 
 
const EmotionComponent = () => { 
  return ( 
    
 
      
Responsive Media Queries
 
      
Resize the screen to see the background and text color change.
 
    
 
  ); 
}; 
 
export default EmotionComponent;

Output:

4. Features of EmotionJS

EmotionJS is a versatile library for styling JavaScript applications, especially React ones. We’ll discuss the prominent characteristics of Emotion below:

• Runtime Performance: Emotion has great runtime performance, generating styles only when needed, reducing performance overhead, and delivering optimized results.
• Server Side Rendering (SSR): The @emotion/server package provides SSR support to render styled HTML on the server.
• CSS Prop: You can apply styles directly to elements using CSS prop, including the support for auto vendor-prefixing, nested selectors, and media queries.
• Dynamic Styling: Emotion allows dynamically generating and applying styles based on props, state, or runtime variables for developing interactive and responsive user interfaces.
• Theming: The ThemeProvider provides built-in support for theming.
• Scoped Styles: Styles are automatically scoped to individual components, preventing style leakage and conflicts with global CSS.
• Modular: Emotion consists of modular packages like @emotion/react, @emotion/styled, and @emotion/css to use only the required features.
• ESLint Plugins: They maintain consistent patterns, uniform coding styles, standard configurations, etc., improving clean coding.
• Supports strings and objects: Emotion allows styles to be written in CSS strings and style object formats.
• Inline child selectors: You can use inline child selectors directly within your styles in Emotion with the help of the Babel plugin.

5. Benefits of Emotion in React

The following are the significant advantages of the Emotion library in React applications:

• Developer-friendly: Emotion enables you to write styles as JavaScript objects alongside React components, enhancing flexibility and boosting productivity.
• Small Bundle Size: Emotion is lightweight owing to its modular architecture, decreasing the load time and increasing the application’s overall performance.
• SSR Compatibility: Emotion works with Server-Side Rendering (SSR) without requiring additional configuration, unlike styled-components, which demand extra setup to handle SSR effectively.
• Performance: Emotion generates and applies styles dynamically at runtime. This helps avoid unstyled content during initial rendering.
• Simplicity: It’s easy to use Emotion as it simplifies the naming conventions, for example, you do not need to specify a className with CSS prop, resulting in easier code composition and cleaner syntax.
• Extensive: EmotionJS provides the flexibility to use media queries, pseudo-selectors, and more with the CSS prop, unlike traditional inline styles.
• Efficiency: Emotion is lighter and faster than the other CSS-in-JS library named styled-components, increasing the efficiency.

6. Which One is Better? Emotion vs Styled-Components

Emotion and Styled-Components are popular CSS-in-JS libraries for using CSS in JavaScript, improving the styling in React applications. But which one is more useful? How do you select the appropriate library for styling your applications? To get a clear picture, let’s compare these two libraries on some crucial parameters and try to draw some conclusions.

Parameters	Emotion	Styled-Components
Bundle Size	Low bundle size decreases the initial load time.	Larger bundle size.
Learning Curve	Steeper learning curve as it supports both string and object styles.	No steep learning curve owing to the intuitive API.
Developer Experience	Takes time to become proficient with Emotion for developers new to CSS-in-JS libraries.	Easy to use for developers having a background in React.
Runtime Performance	Emotion is many times faster than styled-components.	Slower than Emotion.
Server-Side Rendering (SSR)	High SSR support due to the extractCritical utility.	Robust SSR due to the ServerStyleSheet component.
Theming	Excellent theming via the ThemeProvider.	ThemeProvider provides robust theming support.
Community Support	Smaller and growing community.	Larger and active community support.
Suitability	Projects without heavy and complex styling requirements.	Large projects demanding unique styling.

After understanding the above comparison, what can you say? Which one is better, Emotion or Styled-Components, and on what parameters? You cannot give a straight or direct answer to this question. Both libraries have their suitable scenarios. It all depends on your project requirements and the convenience of developers. Therefore, you need to carefully assess your project goals and balance the pros and cons of each library to select the correct one.

7. Final Thoughts

Emotion ReactJS is a powerful library with a multitude of features to style your applications without much complexity. However, it has its associated limitations. So, you need to have a proper understanding of every styling intricacy of Emotion to get an optimal performance. Keep on experimenting with all the possibilities of the library to discover new styling implementations, increasing the performance of React applications. Follow the best practices, official documentation, and community forums to move in the right direction with Emotion.