A Prop-ok használata Styled Components-sel Reactben

Az előző leckéből megtudtuk, hogy a Styled Components könyvtárral stílusosított komponensek használhatók szabályos React komponensekként. Ebben a leckében látni fogjuk, hogy itt hasonló módon fognak működni a prop-ok is.

Tegyük fel, hogy van egy React komponensünk Block, és létrehoztunk benne Styled Components segítségével stílusosított komponenseket: Input és Container:

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

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

Helyezzünk el három Input komponenst a Container-ben:

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

Prop-ok használatával különböző attribútumokat állíthatunk be a komponensekben. Állítsuk be a második input mezőnek a placeholder és type attribútumait a name és text értékekkel, illetve a harmadik input mező type attribútumát állítsuk password értékre:

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

Hozz létre egy üres React komponenst Block-et, készíts benne egy div-et, amelyben három gomb lesz. A Styled Components könyvtár segítségével stílusosítsd ezt a div-et és a gombokat. Prop-ok használatával tiltsd le az első gombot, és a harmadiknak állítsd be a reset típust.