Using Props with Styled Components in React

In the previous lesson, we learned that components styled with the Styled Components library can be used as regular React components. In this lesson, we'll see that props will work in a similar way here.

Let's assume we have a React component Block and we've created Styled Components-styled components Input and Container in it:

const Container = styled.div`
	display: flex;
	flex-direction: column;
	width: 150px;
`;

const Input = styled.input`
	margin: 5px;
	font-size: 18px;
`;

Let's place three Input components into Container:

function Block() {
	return (
		<Container>
			<Input />
			<Input />
			<Input />
		</Container>
	);
}

Using props, we can set different attributes in components. Let's set the second input's placeholder and type attributes to name and text, respectively, and set the third input's type attribute to password:

function Block() {
	return (
		<Container>
			<Input />
			<Input placeholder="name" type="text" />
			<Input type="password" />
		</Container>
	);
}

Create an empty React component Block, make a div in it with three buttons. Using the Styled Components library, style this div and the buttons. Using props, block the first button, and make the third one type reset.