Creating an application with NextJS and Styled Components from scratch (Part 3)

(Image taken from Google)

In today's post we will see about the use of props in our components, props will help us throughout the development of our application to customize the characteristics of our components without the need to repeat a lot of code in our Styled Components file. You must be thinking that working with props is complicated, but its use is not complicated as you might think. Let's see this in practice now.

In the component folder create a folder called Header, after creating the directory, create two files within it, one named index.jsx and the other named style.js. Now we will create the code for our component, below the React and Styled Component code.

import React from 'react';
import { Topo } from './style';
const Menu = () => {
  return (
    <>
     <Top></Top>
    </>
  );
}

export default Menu;

Important note: To use Styled Component's features externally you should not forget to import it into style.js, below the right way you should follow.

import styled from 'styled-components';

Now we can proceed with styling our component.

import styled from 'styled-components';

const Top = styled.header`
 background-color: #333;
 padding: 10px;
 width: 100%;
`;

Wow! Wait, where's the use of props over there? Calm down, let's now add to our code.

import React from 'react';
import { Topo } from './style';
const Menu = () => {
  return (
    <>
     <Top Background={{ color: "#333" }}></Top>
    </>
  );
}

export default Menu;

import styled from 'styled-components';

const Top = styled.header`
 background-color: ${props => props.Background.color};
 padding: 10px;
 width: 100%;
`;

Conclusion:

We can conclude that when working with props, I have flexibility regarding the customization of our components, also avoiding some repetitions. Did you like it? in the next post we will see about some definitions of standards of our theme. A big hug, and until the next post.

Part1
Part2