Skip to main content

Styled Components

Introduction to Styled Components in React

Styled Components is a CSS-in-JS tool that enables developers to write CSS directly in their JavaScript files. It brings the best of both worlds by merging JavaScript and CSS. This article will guide you through the basics of Styled Components, their benefits, and how to use them in React applications.

What are Styled Components?​

Styled Components are essentially JavaScript functions, which return a React component with certain styles attached to it. This way, you can write actual CSS code in your JavaScript and assign it to a variable. This variable can later be used as a normal React component.

Why use Styled Components?​

Here are some benefits of using Styled Components:

  1. CSS Scoping: Styled Components apply styles to components without affecting other parts of the application. This eliminates the risk of CSS class name clashes.

  2. Code Reusability: You can reuse styled components across different parts of your application, promoting DRY (Don't Repeat Yourself) principles.

  3. Dynamic Styling: With Styled Components, you can easily adjust styles based on props. This gives more control over component styling.

  4. Ease of use: Styled Components utilize tagged template literals from ES6, making the syntax familiar and easy to use.

How to use Styled Components in React​

Installation​

Before we can use Styled Components, we need to install them. You can add them to your project with the following command:

npm install styled-components

Or, if you're using yarn:

yarn add styled-components

Creating a Styled Component​

Once installed, you can import Styled Components into your file like so:

import styled from 'styled-components';

Now, let's create our first Styled Component. We'll create a simple button with some styling.

const StyledButton = styled.button`
  background-color: turquoise;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 1em;
  &:hover {
    background-color: darkturquoise;
  }
`;

In the above example, StyledButton is a React component that you can use like any other component.

<StyledButton>Click Me</StyledButton>

Styling Based on Props​

One of the powerful features of Styled Components is the ability to style components based on props. Let's modify our StyledButton to change the background color based on a prop.

const StyledButton = styled.button`
  background-color: ${props => props.primary ? 'turquoise' : 'white'};
  color: ${props => props.primary ? 'white' : 'black'};
  // rest of the styles
`;

Now, when you use the StyledButton component, you can pass in a primary prop to control the style.

<StyledButton primary>Primary Button</StyledButton>
<StyledButton>Default Button</StyledButton>

Conclusion​

This tutorial provides an introduction to Styled Components in React. With Styled Components, you can write CSS in your JavaScript, allowing for scoped and reusable styles. We've also seen how to style components dynamically based on props.

Remember, like any tool, Styled Components isn't a one-size-fits-all solution. It's important to understand its strengths and weaknesses to know when it's the right tool for your project.