Erweiterte Gestaltung von Komponenten in React

Angenommen, wir haben eine React-Komponente Block und wir haben darin mit Styled Components gestaltete Komponenten Button und Container erstellt:

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

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

Stellen wir uns nun vor, dass wir noch eine Komponente Button benötigen, nur mit weißer Textfarbe der Schaltfläche und grünem Hintergrund.

Dafür reicht es aus, auf Basis unserer Komponente Button eine neue Komponente MdButton zu erstellen und darin nur die Eigenschaften zu definieren, die wir ändern möchten:

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

Platzieren wir in Block alle unsere gestalteten Komponenten:

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

Erstellen Sie eine leere React-Komponente Block1. Erstellen Sie darin mit Styled Components einen gestalteten Div mit Breite und Höhe von 150px, gelbem Hintergrund, und einer Rahmenbreite von 2px, nennen Sie ihn DIVA.

Erstellen Sie auf Basis des Divs aus der vorherigen Aufgabe ein gleiches Div DIVB, nur mit grünem Hintergrund und einer Rahmenbreite von 3px.

Erstellen Sie in Block1 einen Div Container. Platzieren Sie darin zwei Komponenten DIVA und zwischen ihnen einen DIVB, die Sie in den vorherigen Aufgaben zu dieser Lektion erstellt haben.