Estilización avanzada de componentes en React

Supongamos que tenemos un componente de React Block y hemos creado en él componentes estilizados usando Styled Components: Button y Container:

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

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

Y ahora imaginemos que necesitamos otro componente Button, pero con texto blanco y fondo verde.

Para esto, basta con crear un nuevo componente MdButton basado en nuestro componente Button y especificar en él solo las propiedades que queremos cambiar:

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

Coloquemos en Block todos nuestros componentes estilizados:

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

Cree un componente de React vacío Block1. Usando Styled Components, cree en él un div estilizado con ancho y alto de 150px, fondo amarillo, y ancho de borde de 2px, llámelo DIVA.

Basándose en el div de la tarea anterior, cree un div similar DIVB, pero con fondo verde y ancho de borde de 3px.

En Block1 cree un div Container. Coloque en él dos componentes DIVA y entre ellos uno DIVB, creados por usted en las tareas anteriores de esta lección.