What is Styled-Components?
Tags: webdev, programming, javascript, react
Published: 2022-05-26 17:56:06

#beginings
Styled-components is a popular library that is used to style React applications. It allows you to build custom components by writing actual CSS in your JavaScript.

In this article, we will take a look at how to use styled-components in a React application.

By the end of the article, you should have an understanding of how to do the following:

Create a styled component
Pass props to a styled component
Create and use a theme
Before we dive into the code, let’s first do a quick overview of the styled-components library and understand the benefits of using it.

What Is Styled-Components?
There are many options you can take when it comes to styling a React application. The traditional way would be to create an external CSS file, then pass the attributes as a string on the className prop.

You can also use the CSS-in-JS technique, where you write the CSS in the JavaScript file. Styled-components takes this approach.

“Use the best bits of ES6 and CSS to style your apps without stress.” — styled-components website

Benefits of using styled-components
Automatic critical CSS — styled-components keeps track of which components are rendered on a page and only adds their styles
No class name bugs — styled-components generates a unique class name for the styles
Easier deletion of CSS — styles are tied to a specific component rather than being added as a class name
Simple dynamic styling — styles can be added to a component based on props or a theme
Painless maintenance — styles added to a component is done all in one place, rather than across multiple files
Automatic vendor prefixing — styled-components handles all of this
Create a Styled Component
To get started, let’s create our first styled component. I will be working on a basic create-react-app project with TypeScript support. You can follow along with or without TypeScript.

The conventional way to name a file when using styled-components is componentName.styled.ts. Where “componentName” is replaced with the name of the component.

For example, I will create a new file called /src/components/styles/Button.styled.ts. This is where I will create my <Button> component.

In this file, first import styled from 'styled-components';. Then, you can use styled to create a styled component.

“Styled components utilises tagged template literals to style your components.” — styled-components website

In other words, when you are defining styles, you are actually creating a component that has the styles attached to it using template literals.

First, type styled. followed by a valid React component or a tagname like ‘div’. For this example, we will create a styled button component.

export const Button = styled.button`
  background-color: springGreen;
  color: black;
  font-size: 16px;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  margin: 1rem;
  cursor: pointer;
  border: none;
  outline: none`;

We can now use this Button component like any normal <button> element in our app.

<Button>Styled Button</Button>

When we render the button, it will now have all of the styles with it.
Source:https://betterprogramming.pub/introduction-to-styled-components-in-react-d84583c28dde