Using props on styled-component and next.js
source link: https://dev.to/britotiagos/using-props-on-styled-component-and-nextjs-51lk
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Posted on Feb 24
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;
`;
Enter fullscreen mode
Exit fullscreen mode
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
`};
Enter fullscreen mode
Exit fullscreen mode
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 extend our style component to create a new component changing a few lines of code.
Stay tuned ๐
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK