Props naudojimas su Styled Components React'e

Iš praeitos pamokos sužinojome, kad sukomponuotus naudojant Styled Components biblioteką komponentus galima naudoti kaip įprastus React komponentus. Šioje pamokoje pamatysime, kad čia panašiai veiks ir props.

Tarkime, kad turime React komponentą Block ir jame sukūrėme sukomponuotus naudojant Styled Components komponentus Input ir Container:

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

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

Įdėkime tris Input komponentus į Container:

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

Naudodami props, galime nustatyti komponentuose įvairius atributus. Nustatykime antrajam įvesties laukui atributus placeholder ir type su reikšmėmis name ir text, atitinkamai, o trečiajam įvesties laukui prie atributo type nustatykime reikšmę password:

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

Sukurkite tuščią React komponentą Block, jame padarykite div, kuriame bus trys mygtukai. Naudodami Styled Components biblioteką, stiliuokite šį div ir mygtukus. Naudodami props, užblokuokite pirmąjį mygtuką, o trecijam padarykite tipą reset.