Styled Components and Emotion (CSS-in-JS) in React JS
In modern React development, managing styles has evolved beyond traditional CSS files. With the rise of CSS-in-JS libraries like Styled Components and Emotion, developers can now define styles directly within JavaScript files, making it easier to manage and scope styles to individual components. This approach allows for more dynamic styling, reusable components, and seamless integration with React’s component-based architecture. In this article, we will explore both Styled Components and Emotion, and demonstrate how to use them in React applications.
1. What is CSS-in-JS?
CSS-in-JS is a technique where JavaScript is used to define and manage CSS styles. Instead of writing styles in traditional CSS files, CSS is written directly within JavaScript files, often alongside component code. This allows styles to be scoped to specific components, reducing global style conflicts and improving maintainability. Two popular libraries for implementing CSS-in-JS in React are Styled Components and Emotion.
2. Styled Components
Styled Components is a widely used CSS-in-JS library for styling React components. It allows you to write actual CSS within JavaScript using tagged template literals. Styled Components generates unique class names to apply the styles to components, ensuring that styles are scoped to the components they belong to.
How to Use Styled Components
First, you need to install the Styled Components package:
npm install styled-components
After installation, you can create styled components using the styled object. Here's a basic example:
import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
&:hover {
background-color: darkblue;
}
`;
const App = () => {
return (
);
};
export default App;
In this example, the Button component is created using styled.button, and styles are applied using template literals. The styles are scoped to the button, and dynamic styling, such as hover, can be easily incorporated.
Dynamic Styles with Props
You can also pass props to dynamically change the styles of a component. For example:
import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
background-color: ${props => props.primary ? 'blue' : 'gray'};
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
`;
const App = () => {
return (
);
};
export default App;
In this example, the primary prop is used to conditionally change the background color of the button.
3. Emotion
Emotion is another popular CSS-in-JS library for styling React components. Emotion provides a similar approach to Styled Components but offers more flexibility. It provides two primary methods for styling components: styled API (similar to Styled Components) and the css function for writing styles inline.
How to Use Emotion
First, you need to install Emotion:
npm install @emotion/react @emotion/styled
Once installed, you can use the styled API in a similar way to Styled Components:
/** @jsxImportSource @emotion/react */
import React from 'react';
/** @jsx jsx */
import { css, jsx } from '@emotion/react';
import styled from '@emotion/styled';
const Button = styled.button`
background-color: green;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
`;
const App = () => {
return (
);
};
export default App;
This example uses Emotion's styled API to create a button with scoped styles.
Dynamic Styles with Emotion
Like Styled Components, Emotion allows you to apply dynamic styles based on props. Here’s an example using the css function for inline styles:
/** @jsxImportSource @emotion/react */
import React from 'react';
import { css } from '@emotion/react';
const App = () => {
const buttonStyle = (primary) => css`
background-color: ${primary ? 'blue' : 'gray'};
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
`;
return (
);
};
export default App;
In this example, the buttonStyle function applies conditional styles based on the primary prop using the css function from Emotion.
4. Benefits of CSS-in-JS (Styled Components and Emotion)
- Scoped Styles: Styles are scoped to individual components, which reduces the chance of global style conflicts.
- Dynamic Styling: Both Styled Components and Emotion allow for dynamic styling based on props or component state.
- No External Stylesheets: With CSS-in-JS, you don’t need to worry about managing external CSS files. Everything is scoped and handled within your JavaScript code.
- CSS Features: You can use all standard CSS features, such as media queries, pseudo-classes, and nested selectors.
- Theming: Both libraries offer a powerful theming solution that can be applied globally or locally within components.
5. Limitations of CSS-in-JS
- Performance: CSS-in-JS may add a small performance overhead due to the generation of styles at runtime, especially for larger applications.
- Code Size: As styles are written in JavaScript, the codebase may increase in size, which can affect bundle size and load times.
- Learning Curve: For developers familiar with traditional CSS, transitioning to CSS-in-JS may take some time to understand the syntax and concepts.
6. Conclusion
Styled Components and Emotion are both powerful tools for managing styles in React applications. They help to manage styles in a scoped and dynamic manner, improving the maintainability and modularity of components. While there are some limitations such as performance and bundle size, these libraries provide a more flexible and maintainable approach compared to traditional CSS. For modern React development, CSS-in-JS is a highly recommended option.