Introduction to styled-components Part-1

#javascript #webdev #css #react

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

Create a react application by using create-react-app.
Install styled-components using npm or yarn npm install styled-components --save or yarn add styled-components
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

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.

import styled from 'styled-components';

In the above line, I have just imported the styled-components library as a default import named styled.

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

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.

In line 23, we used our button as a React component.

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

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 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.