Avansert stilsetting av komponenter i React

Anta at vi har en React-komponent Block og vi har laget stiliserte komponenter i den ved hjelp av 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 nå forestiller vi oss at vi trenger en komponent til Button, bare med hvit knappetekst og grønn bakgrunn.

For å gjøre dette er det nok for oss å basere oss på vår komponent Button for å lage en ny komponent MdButton og skrive inn i den bare de egenskapene vi ønsker å endre:

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

La oss plassere alle våre stiliserte komponenter i Block:

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

Opprett en tom React-komponent Block1. Med Styled Components, opprett en stilisiert div i den med bredde og høyde på 150px, gul bakgrunn, og bordbredde på 2px, kall den DIVA.

Basert på diven fra forrige oppgave, opprett en lik div DIVB, bare med grønn bakgrunn og bordbredde på 3px.

I Block1 opprett en div Container. Plasser to DIVA-komponenter i den og mellom dem en DIVB, som du har opprettet i de foregående oppgavene til denne leksjonen.