Styled Components көмегімен React-та пропстарды қолдану

Алдыңғы сабақтан біз Styled Components кітапханасы арқылы стильденген компоненттерді жай React компоненттері сияқты қолдануға болатынын білдік. Бұл сабақта біз мұнда пропстардың да осыған ұқсас жұмыс істейтінін көреміз.

Бізде Block деген React компоненті бар деп алып, оның ішінде 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 түрін беріңіз.