Styled Components ile React'ta Prop Kullanımı

Önceki dersten, Styled Components kütüphanesi kullanılarak stilize edilmiş bileşenlerin normal React bileşenleri gibi kullanılabileceğini öğrendik. Bu derste, burada da benzer şekilde prop'ların çalışacağını göreceğiz.

Bir React bileşenimiz Block olduğunu varsayalım ve içinde Styled Components kullanılarak stilize edilmiş Input ve Container bileşenlerini oluşturduk:

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

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

Üç Input bileşenini Container içine yerleştirelim:

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

Prop'ları kullanarak bileşenlerde çeşitli nitelikler belirleyebiliriz. İkinci input'a sırasıyla name ve text değerlerine sahip placeholder ve type niteliklerini ayarlayalım ve üçüncü input'un type niteliğine password değerini ayarlayalım:

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

Boş bir React bileşeni Block oluşturun, içinde üç buton bulunan bir div yapın. Styled Components kütüphanesini kullanarak bu div'i ve butonları stilize edin. Prop'ları kullanarak ilk butonu devre dışı bırakın, üçüncü butonu ise reset tipi yapın.