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 деп атаңыз.

Алдыңғы тапсырмадағы див негізінде жасыл фонды және шекара ені 3px болатын DIVB дивін жасаңыз.

Block1-те Container дивін жасаңыз. Онда осы сабақтағы алдыңғы тапсырмаларда сіз жасаған екі DIVA және олардың арасында бір DIVB компоненттерін орналастырыңыз.