Користење на пропси со Styled Components во React

Од претходната лекција научивме дека стилизираните со помош на библиотеката Styled Components компоненти може да се користат како обични React компоненти. Во оваа лекција ќе видиме дека овде на сличен начин ќе работат и пропсите.

Да претпоставиме дека имаме React компонента Block и во неа креиравме стилизирани со помош на Styled Components компоненти Input и Container:

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

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

Поставете ги три компоненти Input во Container:

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

Користејќи пропси, можеме да поставуваме во компонентите различни атрибути. Ајде да му ги поставиме на вториот инпут атрибутите placeholder и type со вредности name и text, соодветно, а на третиот инпут кај атрибутот type да ја поставиме вредноста password:

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

Креирајте празна React компонента Block, направете во неа div, во кој ќе има три копчиња. Со помош на библиотеката Styled Components, стилизирајте го овој div и копчињата. Користејќи пропси, блокирајте го првото копче, а на третото направете тип reset.