Creating an application with NextJS and Styled Components from scratch (Part 2)
Tags: css, javascript, react
Published: 2020-08-03 21:19:22

![Wallpaper-Styled-Components](https://dev-to-uploads.s3.amazonaws.com/i/wj23m1b982uunx2h8140.png)

## Understanding Styled Components
 Creating components in React is not complicated, but at the same time we have a difficulty in modeling the characteristics of these components, you must be confused with what I said now, right? But to answer that, just look at our Hello World where we had no trouble creating our component. Now let's dig deeper into the thing, suppose that in our application we had the following code:

```Code-JSX
const headerStyle = {
  backgroundColor: 'red';
  height: '40vh';
  paddingBottom: '4rem';
  paddingTop: '4rem';
  width: '100%';
};
const logoStyle = {
  fontSize: '16px',
  textAlign: 'center'
};

<header style={divStyle}>
  <h1 style={logoStyle}>My Logo</h1>
</header>
```
 At first you might think that due to the size of this code, nothing would be harmed, right? But you are wrong, when we create our CSS inline together with the component we run the risk of filling our file with a sea of ​​code, and this ends up harming the support of our application. Ok, we could also put these styles in an external file, but we would also go through possible problems regarding the support of each component and even in the separation of its characteristics and its children, it was thinking about these problems that Styled Components appeared.

 Styled Components comes to simplify the way we work with each component, I mean: in its characteristics. To better understand how it works, let's get our hands dirty. Open the project folder we are developing on a terminal, then download the Styled Component package using the following command:

```Command
 npm install --save styled-components
```

 Now we will create a folder at the root of our project with the name of Components, right after we will create another folder inside the Components with the name of HelloWorld, once we can create a file named Style.js. To create our components, we first need to import the styled component, below how to import the styled component.

```Import
 import styled from 'styled-components'
```

 Now let's create our Hello World component with its features.

```JavaScriptCode
 import styled from 'styled-components'
 const HelloWorld = styled.h1`
  color: #333;
  font-family: arial;
  font-size: 2.6rem;
 `;
 export { HelloWorld };
```

Very simple, right ?! But don't forget that to use it you need to import it into the page you want to place. Below is an example of the component in use.

```JSXCode
import React from 'react';
import { HelloWorld } from './Components/HelloWorld/Style';
const App = () => {
  return (
    <>
     <HelloWorld>Hello World!</HelloWorld>
    </>
  );
}

export default App;
```

Did you like what we did today? In the next post we will understand the use of props in our components, a big hug and until the next post :).

<a href="https://dev.to/xorandre/creating-an-application-with-nextjs-and-styled-components-from-scratch-part-1-34am">Part1</a>
<a href="https://dev.to/xorandre/creating-an-application-with-nextjs-and-styled-components-from-scratch-part-3-592h">Part3</a>