Matumizi ya Props na Styled Components katika React

Kutoka kwa somo lililopita tulijifunza kuwa vilivyopangwa kwa kutumia maktaba ya Styled Components vinaweza kutumika kama vile vyengine vya React . Katika somo hili tutaona kuwa hapa kwa namna sawa pia yatafanya kazi.

Tukichukulia tuna kipengele cha React Block na tumetengeneza ndani yake vilivyopangwa kwa kutumia Styled Components Input na Container:

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

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

Weka viambatanishi vitatu Input ndani ya Container:

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

Kwa kutumia props, tunaweza kuweka katika viambatanishi sifa mbalimbali. Wacha tuweke kwenye kichujio cha pili sifa placeholder na type zenye maadili name na text, mtawalia, na kwa kichujio cha tatu kwa sifa type tuweke thamani password:

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

Tengeneza kipengele tupu cha React Block, tengeneza ndani yake div, ambayo itakuwa na vitufe vitatu. Kwa kutumia maktaba ya Styled Components, andika mtindo wa div hii na vitufe. Kwa kutumia props, zuia kitufe cha kwanza, na cha tufanye na aina reset.