React-ի կոմպոնենտների ընդլայնված ոճավորում

Ենթադրենք՝ մենք ունենք React կոմպոնենտ Block և դրա մեջ ստեղծել ենք Styled Components-ի միջոցով ոճավորված Button և Container կոմպոնենտները:

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

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

Հիմա պատկերացնենք, որ մեզ անհրաժեշտ է ևս մեկ Button կոմպոնենտ, միայն կոճակի սպիտակ տեքստով և կանաչ ֆոնով:

Դրա համար մեզ բավական է մեր Button կոմպոնենտի հիման վրա ստեղծել նոր MdButton կոմպոնենտ և դրա մեջ նշել միայն այն հատկությունները, որոնք ցանկանում ենք փոխել.

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

Block-ում տեղադրենք մեր բոլոր ոճավորված կոմպոնենտները.

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

Ստեղծեք դատարկ React կոմպոնենտ Block1: Օգտագործելով Styled Components՝ ստեղծեք դրա մեջ 150px լայնությամբ և բարձրությամբ ոճավորված դիվ, դեղին ֆոնով, և 2px եզրագծի լայնությամբ, անվանեք այն DIVA:

Նախորդ առաջադրանքի դիվի հիման վրա ստեղծեք նույնպիսի դիվ DIVB, միայն կանաչ ֆոնով և 3px եզրագծի լայնությամբ:

Block1-ում ստեղծեք Container դիվ: Դրա մեջ տեղադրեք երկու DIVA կոմպոնենտ և նրանց միջև մեկ DIVB կոմպոնենտ, որոնք դուք ստեղծել եք այս դասի նախորդ առաջադրանքներում: