Avancerad styling av komponenter i React

Anta att vi har en React-komponent Block och vi har skapat stiliserade komponenter i den med hjälp av Styled Components Button och Container:

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

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

Och nu föreställ dig att vi behöver ytterligare en komponent Button, bara med vit knapptext och grön bakgrund.

För att göra detta räcker det för oss att skapa en ny komponent MdButton baserad på vår Button-komponent och bara skriva in de egenskaper vi vill ändra:

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

Låt oss placera alla våra stiliserade komponenter i Block:

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

Skapa en tom React-komponent Block1. Skapa med Styled Components en stiliserad div i den med bredd och höjd på 150px, gul bakgrund, och kantbredd på 2px, kalla den DIVA.

Skapa en liknande div DIVB baserad på div:en från föregående uppgift, bara med grön bakgrund och kantbredd på 3px.

Skapa en div Container i Block1. Placera två DIVA-komponenter i den och mellan dem en DIVB-komponent, skapade av dig i de tidigare uppgifterna till denna lektion.