Stilizimi i Avancuar i Komponentëve në React

Supozoni se kemi një komponent React Block dhe kemi krijuar brenda tij komponentë të stilizuar duke përdorur Styled Components: Button dhe Container:

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

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

Tani le të imagjinojmë se na duhet një komponent tjetër Button, por me tekst të bardhë për butonin dhe sfond jeshil.

Për këtë, mjafton që të krijojmë një komponent të ri MdButton bazuar në komponentin tonë Button dhe të përcaktojmë në të vetëm ato veti që duam të ndryshojmë:

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

Le të vendosim në Block të gjithë komponentët tanë të stilizuar:

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

Krijoni një komponent React bosh Block1. Duke përdorur Styled Components, krijoni në të një div të stilizuar me gjerësi dhe lartësi 150px, sfond të verdhë, dhe gjerësi kufiri 2px, emërtoni atë DIVA.

Bazuar në div nga detyra e mëparshme, krijoni një div të ngjashëm DIVB, por me sfond jeshil dhe gjerësi kufiri prej 3px.

Në Block1 krijoni një div Container. Vendosni në të dy komponentë DIVA dhe midis tyre një DIVB, të krijuar nga ju në detyrat e mëparshme për këtë mësim.