Utilizarea props cu Styled Components în React

Din lecția anterioară am aflat că componentele stilizate cu ajutorul bibliotecii Styled Components pot fi utilizate ca componente React obișnuite. În această lecție vom vedea că aici, în mod similar, vor funcționa și props-urile.

Să presupunem că avem un component React Block și am creat în el componente stilizate cu ajutorul Styled Components: Input și Container:

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

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

Să plasăm trei componente Input în Container:

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

Folosind props-uri, putem seta în componente atribute diferite. Să setăm pentru al doilea input atributele placeholder și type cu valorile name și text, respectiv, iar pentru al treilea input la atributul type să setăm valoarea password:

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

Creați un component React gol Block, faceți în el un div în care vor fi trei butoane. Cu ajutorul bibliotecii Styled Components, stilizați acest div și butoanele. Folosind props-uri, blocați primul buton, iar al treilea să îi faceți tipul reset.