Avanceret styling af komponenter i React

Antag at vi har en React-komponent Block og vi har oprettet stylede komponenter i den ved hjælp af Styled Components Button og Container:

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

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

Og lad os nu forestille os, at vi har brug for endnu en komponent Button, kun med hvid knaptekst og grøn baggrund.

For at gøre dette er det nok for os at oprette en ny komponent MdButton baseret på vores Button-komponent og kun skrive de egenskaber, vi ønsker at ændre:

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

Lad os placere alle vores stylede komponenter i Block:

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

Opret en tom React-komponent Block1. Opret ved hjælp af Styled Components en styled div i den med en bredde og højde på 150px, gul baggrund, og en kantbredde på 2px, navngiv den DIVA.

Opret en div DIVB baseret på div'en fra den forrige opgave, kun med grøn baggrund og en kantbredde på 3px.

Opret en div Container i Block1. Placer to DIVA-komponenter i den og mellem dem en DIVB, som du har oprettet i de forrige opgaver til denne lektion.