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 компоненти керак, фақат тугманинг matni oқ фон билан яшил рангда.

Буни амалга ошириш учун бизнинг 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, caриқ фон, ва чекка эни 2px бўлган стилланган див яратинг, уни DIVA деб номланг.

Олдинги масаладаги див асосида яна бир DIVB дивини яратинг, фақат яшил фон ва чекка эни 3px бўлган.

Block1 ичида Container дивини яратинг. Унга сиз томонингиздан ушбу дарс учун олдинги масалаларда яратилган иккита DIVA ва уларнинг ўртасига битта DIVB компонентини жойланг.