Komponensek speciális stílusozása Reactban

Tegyük fel, van egy React komponensünk Block, és létrehoztunk benne Styled Components segítségével stílusozott komponenseket: Button és Container:

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

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

Most képzeljük el, hogy szükségünk van még egy Button komponensre, de fehér szöveggel és zöld háttérszínnel.

Ehhez elegendő, ha a meglévő Button komponensünk alapján létrehozunk egy új MdButton komponenst, és csak a módosítani kívánt tulajdonságokat írjuk bele:

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

Helyezzük el a Block komponensben az összes stílusozott komponensünket:

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

Hozz létre egy üres React komponenst Block1 névvel. Styled Components segítségével hozz létre benne egy stílusozott div-et, melynek szélessége és magassága 150px, a háttérszíne sárga, a széle vastagsága 2px. Nevezd el DIVA-nak.

Az előző feladat div komponense alapján hozz létre egy ugyanilyen div-et DIVB névvel, de zöld háttérszínnel és 3px vastag széllel.

A Block1 komponensben hozz létre egy Container div-et. Helyezz el benne két DIVA komponenst és közéjük egy DIVB komponenst, amelyeket az e leckéhez tartozó előző feladatokban hoztál létre.