Skip to main content

Styled-components

Styled-components is a popular 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. In this tutorial, we'll learn how to use styled-components in React applications, along with sample code, explanations, and best practices.

Setting up styled-components​

To use styled-components in your React project, you first need to install the library:

npm install styled-components

Creating Styled Components​

With styled-components, you can create styled React components using tagged template literals. You write your CSS as a template literal, and styled-components 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 'styled-components';

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 styled-components library and created a StyledButton component with the desired styles. We then used the StyledButton component in our CustomButton component.

Props and Theming​

Styled-components 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 styled-components:

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

// CustomButton.js
import React from 'react';
import styled from 'styled-components';

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 styled-components 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 styled-components' theming capabilities to manage global styles across your application.
  3. Combine with other styling solutions: You can combine styled-components with other styling solutions like CSS Modules or inline styles, depending on your needs and preferences.

Conclusion​

Styled-components 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, styled-components can help you build organized, modular, and maintainable React applications with ease.