Prop lietošana ar Styled Components React

No iepriekšējās nodarbības mēs uzzinājām, ka stilizētos ar Styled Components bibliotēku komponentus var izmantot kā parastos React komponentus. Šajā nodarbībā mēs redzēsim, ka šeit līdzīgi darbosies arī prop.

Pieņemsim, ka mums ir React komponents Block un mēs tajā esam izveidojuši stilizētos ar Styled Components komponentus Input un Container:

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

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

Novietosim trīs komponentus Input Container:

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

Izmantojot prop, mēs varam iestatīt komponentos dažādus atribūtus. Iestatīsim otrajam ievades laukam atribūtus placeholder un type ar vērtībām name un text, attiecīgi, bet trešajam ievades laukam atribūtā type iestatīsim vērtību password:

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

Izveidojiet tukšu React komponentu Block, izveidojiet tajā div, kurā būs trīs pogas. Izmantojot Styled Components bibliotēku, nostilizējiet šo div un pogas. Izmantojot prop, bloķējiet pirmo pogu, un trešajai iestatiet tipu reset.