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 компоненттериңизди жайгаштырыңыз.