Uboreshaji wa Mitindo ya Vijenzi katika React

Tuseme tuna kijenzi cha React Block na tumeunda ndani yake vijenzi vilivyotiwa mitindo kwa kutumia Styled Components Button na Container:

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

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

Sasa hebu fikiria kwamba tunahitaji kijenzi kingine Button, lakini kwa maandishi meupe ya kifungo na usuli wa kijani.

Ili kufanya hivyo inatosha kwa msingi wa kijenzi chetu Button kuunda kijenzi kipya MdButton na kuandika ndani yake sifa tu tunazotaka kubadilisha:

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

Weka katika Block vijenzi vyote vilivyotiwa mitindo:

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

Unda kijenzi tupu cha React Block1. Kwa kutumia Styled Components unda ndani yake div iliyotiwa mitindo yenye upana na urefu wa 150px, usuli wa manjano, na upana wa mpaka wa 2px, uita DIVA.

Kwa msingi wa div kutoka kwenye kazi iliyopita unda div sawa DIVB, lakini kwa usuli wa kijani na upana wa mpaka wa 3px.

Katika Block1 unda div Container. Weka ndani yake vijenzi viwili DIVA na kati yao kimoja DIVB, ulizounda katika kazi zilizopita za somo hili.