Stilizarea Avansată a Componentelor în React

Să presupunem că avem o componentă React Block și am creat în ea componente stilizate cu Styled Components Button și Container:

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

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

Și acum să ne imaginăm că avem nevoie de o altă componentă Button, dar cu textul butonului alb și fundal verde.

Pentru aceasta, este suficient să creăm pe baza componentei noastre Button o nouă componentă MdButton și să specificăm în ea doar proprietățile pe care dorim să le modificăm:

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

Să plasăm în Block toate componentele noastre stilizate:

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

Creați o componentă React goală Block1. Cu ajutorul Styled Components creați în ea un div stilizat cu lățimea și înălțimea de 150px, fundal galben, și lățimea bordurii de 2px, denumiți-l DIVA.

Pe baza div-ului din sarcina anterioară creați un div similar DIVB, dar cu fundal verde și lățimea bordurii de 3px.

În Block1 creați un div Container. Plasați în el două componente DIVA și între ele un DIVB, create de dvs. în sarcinile anterioare pentru această lecție.