Introduction to styled-components Part-1
Tags: javascript, webdev, css, react
Published: 2020-12-03 11:27:27

![bdacfa80-6132-11e9-90b9-33e6eee04d1f](https://dev-to-uploads.s3.amazonaws.com/i/sjkizkzbephcwf87l0ru.png)
 
##Why styled-components?

I know what you are thinking right now I know bootstrap, sass, etc., and why the hell should I use styled-components. Bear with me till the end I am sure you are gonna love this awesome library.

Styled-components is one of the popular styling libraries for React.js and it is used by some of the tech giants like Google, Github, Spotify, Tinder, etc.,

The reason behind the popularity of styled-components is because of the **React way of styling**(component-based styling) i.e we can create a component by using CSS in JS and we can use it anywhere in the application.

##Installation

Installation is super simple,
Install styled-components from your preferred package managers(npm or yarn).
```npm install -styled-components --save```


##Advantages of using styled-components

+ Automatic critical CSS.
+ No class name bugs.
+ Easier detection of CSS.
+ Simple dynamic styling.
+ Painless maintenance.

##Getting started

1. Create a react application by using create-react-app.
2. Install styled-components using npm or yarn
`npm install styled-components --save` or `yarn add styled-components`
3. After the above steps you can see that in your package.json file as a dependency.
Your package.json looks like this :
 
```
"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.4.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "styled-components": "^5.2.1",
    "web-vitals": "^0.2.4"
}
```

##Creating our first styled-component

Now we have all the prerequisites to style our react app using styled-components.

Trust me it's simple and awesome!

In app.js add these lines of code

![Hello world](https://dev-to-uploads.s3.amazonaws.com/i/itpzgjqfpaazce9vpotk.jpg)
 
The lines with white dots or white lines are the newly added lines in the app.js file.

Now let's understand what we have written in this file.

```javascript
import styled from 'styled-components';
```
In the above line, I have just imported the styled-components library as a default import named *styled*.

```javascript
const FirstButton = styled.button`
  border: none;
  outline: none;
  padding: 10px;
  background: #15b996;
  border-radius: 5px;
  color: #ffffff;
  display: block;
  margin: 200px auto 0 auto;
  height: 50px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
`;
```
In this snippet, I have created a variable named FirstButton and used the styled-components library to create a Button component.

But where we define that we are going to create a button?

Look carefully in the first line of the FirstButton variable we have defined something like this 
```javascript
const FirstButton = styled.button`
...
`;
```
 
We have called the `button` object from the `styled` object as `styled.button ` and that's how we defined that we are going to create a button component.

Note that after `styled.button` we used backticks(``) to write CSS inside the FirstButton variable. This is needed because we are writing CSS in JS and not CSS. Because styled-components utilize tagged template literals to style your components.

After that, we use the FirstButton component like any other Component in React.

![app.js](https://dev-to-uploads.s3.amazonaws.com/i/adl3ix2mge4uvlpw3exn.jpg)
 
In line 23, we used our button as a React component.

That's it we have created our first styled-component.

![Output](https://dev-to-uploads.s3.amazonaws.com/i/p66w2ks96pxh4bcbhmeo.jpg)

You can see the output of our styled component button above.😍

Using styled-components we can style any HTML element not only the button.
For example, if you want to style a div element you can do that by replacing `styled.button` with `styled.div` and likewise we can style all the HTML elements.

It is not possible to explain this awesome library in one post we will explore this in my upcoming posts!

For more details, you can explore the official docs of [styled-components](https://styled-components.com/) they have good documentation there.

If you like this post do follow me for more.If you find anything wrong do let me know.

Thanks for reading.