Styled Componentsi propside kasutamine Reactis

Eelmisest õppetükist saime teada, et Styled Components teeki abil stiilitud komponente saab kasutada nagu tavalisi React komponente. Selles õppetükis näeme, et siin töötavad sarnaselt ka propsid.

Oletame, et meil on React komponent Block ja me lõime selles Styled Componentsi abil stiilitud komponendid Input ja Container:

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

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

Paigaldame kolm komponenti Input Container sisse:

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

Kasutades propse, saame komponentides seada erinevaid atribuute. Paneme teise sisendvälja atribuutidele placeholder ja type väärtused name ja text, vastavalt, ning kolmanda sisendvälja atribuudile type määrame väärtuseks password:

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

Loo tühi React komponent Block, tee selles div, milles on kolm nuppu. Stiilida see div ja nupud Styled Componentsi teeki abil. Kasutades propse, blokeeri esimene nupp, ja tehke kolmandast nupust tüüp reset.