Using props on styled-component and next.js

If you landed here and don't know how to install and use style component you can start with this articles here.

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.

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 👇

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

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

Yes I did add a Box there to centre everything, but it is not important for our example here.

That is Props folks

What is next?

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

Stay tuned 👋

Comments

[sameer dean`]

which version introuced this?