Gebruik van Props met Styled Components in React

Uit de vorige les hebben we geleerd dat gestileerde componenten gemaakt met de Styled Components-bibliotheek kunnen worden gebruikt als gewone React componenten. In deze les zullen we zien dat props hier op een vergelijkbare manier werken.

Stel dat we een React-component Block hebben en we hebben daarin gestileerde componenten gemaakt met Styled Components: Input en Container:

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

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

Laten we drie Input componenten in de Container plaatsen:

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

Met behulp van props kunnen we verschillende attributen instellen in componenten. Laten we voor de tweede invoer de attributen placeholder en type instellen met de waarden name en text, respectievelijk, en voor de derde invoer het attribuut type instellen op de waarde password:

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

Maak een lege React-component Block, plaats daarin een div met drie knoppen. Gebruik de Styled Components-bibliotheek om deze div en knoppen te stylen. Gebruik props om de eerste knop uit te schakelen, en geef de derde knop het type reset.