Using props on styled-component and next.js
Published: 2022-02-24 10:58:18

_If you landed here and don't know how to install and use style component you can start with this [articles here](https://dev.to/britotiagos/how-add-style-components-to-nextjs-and-start-using-it-4kdf)._

In today's article, we'll talk a little bit about props.
**Props** is a React special keyword that stands for **properties** and it is used to pass data between components.

The styled-component lets you use props and change the CSS with it, as well as do other things that are out of the scope for today. 

For instance, if props are "primary" change these colours, so you can dynamically change your button based on anything that you want.

## How do we use those Props?

For instance, create a button that will have the following CSS:

```
export const Button = styled.button`
 cursor: pointer;
 padding: 15px 22px;
 border-radius: 24px;
 border: none;
 font-weight: 500;
 color: #fff;
 background: #0096c7;
`;
```

_Remember to import the styled from the styled component at the top of your file, like this_. 👇

`import styled from "styled-components";`

But we want another button that will have the same CSS as the previous one but with a different background colour.

![Image of two buttons with different background colours](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jaujaci8emyrsp7o64aa.png)
 

To achieve this we can use props, passing a prop called "secondary" to the second button.

` <Button secondary>Secondary</Button>`

In the CSS for that button we need to add the code below,

` background: ${(props) => (props.secondary ? "#f00" : "#00a8ff")};`

The code above has a function that gets props, we can target that _secondary_ prop, like this `props.secondary`.

Secondary on this instance is a boolean, and if this exists, so the secondary is `true`, it will return the first value `"#f00"` otherwise will use the second value `"#00a8ff"` 🤯

In the end, our file will look something like this 👇
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7wb8d8uraggnyt2l83s.png)
 
This is useful if you want to change only one or 2 props, but what happens when you need to change half of the styles? 

It can be a bit too repetitive to type that whole thing over and over for each of the CSS properties that you want to change.

For that, we can use props and change everything at once, even add new CSS to it if we wish.
To achieve that we can add the code below 👇

```
 ${(props) =>
 props.secondary &&
 `
 background: #f00;
 color: #00a8; 
 border-radius: 0
 `};
```
Your code should look like this
![Image with the code above](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gqnbqu9g92eascp4lvp.png)
 
Some people will find this a bit too hard to read, but if you have the correct format or styles in your code editor it will become easy to read.

In the end, your code will look like this
![Image with the whole code as it appears in the code editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wrgo7ndxj2ysiar7rxw.png)
 
_Yes I did add a `Box` there to centre everything, but it is not important for our example here._

That is Props folks {% spotify spotify:track:73U87n7swRHpbX0deEpxcJ %}

## What is next?
In the next article, we will explore how to build a teaser that can be used across the website.



Stay tuned 👋