Përdorimi i Props me Styled Components në React

Nga mësimi i kaluar mësuam se komponentët të stilizuar me bibliotekën Styled Components mund të përdoren si komponentë të rregullt React. Në këtë mësim do të shohim se këtu në mënyrë të ngjashme do të funksionojnë edhe props.

Supozoni se kemi një komponent React Block dhe kemi krijuar në të komponentë të stilizuar me Styled Components Input dhe Container:

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

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

Le të vendosim tre komponentë Input në Container:

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

Duke përdorur props, ne mund të vendosim atribute të ndryshme në komponentë. Le t'i vendosim inputit të dytë atributet placeholder dhe type me vlerat name dhe text, përkatësisht, kurse inputit të tretë te atributi type le të vendosim vlerën password:

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

Krijoni një komponent React bosh Block, bëni në të një div, në të cilin do të ketë tre butona. Duke përdorur bibliotekën Styled Components, stilizoni këtë div dhe butonat. Duke përdorur props, bllokoni butonin e parë, kurse të tretit bëjeni tip reset.