React'ta Bileşenler için Gelişmiş Stil Verme

Diyelim ki bir React bileşenimiz var Block ve içinde Styled Components kullanarak stilize edilmiş Button ve Container bileşenleri oluşturduk:

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

const Button = styled.input`
	background-color: orange;
	font-size: 18px;
	margin: 5px;
`;

Şimdi hayal edelim, bir tane daha Button bileşenine ihtiyacımız var, ancak beyaz yazı rengi ve yeşil arka plan rengi olan.

Bunun için, mevcut Button bileşenimiz temel alınarak yeni bir MdButton bileşeni oluşturmamız ve içinde sadece değiştirmek istediğimiz özellikleri belirtmemiz yeterli:

const MdButton = styled(Button)`
	color: white;
	background-color: green;
`;

Block bileşeninde tüm stilize edilmiş bileşenlerimizi yerleştirelim:

function Block() {
	return (
		<Container>
			<Button>btn0</Button>
			<MdButton>btn1</MdButton>
		</Container>
	);
}

Boş bir React bileşeni Block1 oluşturun. Styled Components kullanarak içinde genişliği ve yüksekliği 150px, arka plan rengi sarı, kenarlık genişliği 2px olan bir div oluşturun, adını DIVA koyun.

Önceki görevdeki div temel alınarak, aynı div'den DIVB oluşturun, sadece arka plan rengi yeşil ve kenarlık genişliği 3px olacak şekilde.

Block1 içinde bir Container div'i oluşturun. İçine bu dersteki önceki görevlerde oluşturduğunuz iki DIVA bileşeni ve aralarında bir tane DIVB bileşeni yerleştirin.