React-da Komponentlerin Genislendirilmiş Stillesdirilmesi

Ferez edek ki, bizim React komponentimiz Block var ve biz onda Styled Components vasitesile stilize edilmis Button ve Container komponentleri yaratmışıq:

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

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

Indi ise tesevvur edek ki, bizim daha bir Button komponentine ehtiyacımız var, amma ag rengli metn ve yasil fonla.

Bunun ucun bizim Button komponentimiz esasında yeni MdButton komponenti yaradıb, onda sadece deyismek istediyimiz xususiyyetleri yaza bilerik:

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

Gelin Block-da butun stilize komponentlerimizi yerlesdirek:

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

Bos React komponenti Block1 yaradın. Styled Components vasitesile icinde eni ve hundurluyu 150px, sari fon rengi, ve serhed eni 2px olan stilize div yaradın, onun adını DIVA qoyun.

Evvelki meselede yaratdıgınız div esasında DIVB adlı eyni divi yaradın, amma yasil fon rengi ve 3px serhed eni ile.

Block1 icinde Container divi yaradın. Icine evvelki meselerde bu ders ucun yaratdıgınız iki DIVA komponenti ve onların arasında bir DIVB komponenti yerlesdirin.