Korišćenje props sa Styled Components u Reactu

Iz prethodne lekcije smo naučili da se komponente stilizovane pomoću biblioteke Styled Components mogu koristiti kao obične React komponente. U ovoj lekciji ćemo videti da će props ovde na sličan način raditi.

Pretpostavimo da imamo React komponentu Block i da smo u njoj kreirali stilizovane pomoću Styled Components komponente Input i Container:

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

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

Postavimo tri komponente Input u Container:

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

Korišćenjem props, možemo postavljati u komponentama različite atribute. Hajde da postavimo drugom inputu atribute placeholder i type sa vrednostima name i text, respektivno, a trećem inputu za atribut type postavimo vrednost password:

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

Kreirajte praznu React komponentu Block, u njoj napravite div, u kome će biti tri dugmeta. Pomoću biblioteke Styled Components, stilizujte ovaj div i dugmad. Korišćenjem props, blokirajte prvo dugme, a trećem napravite tip reset.