Uitgebreide Stilering van Komponente in React

Veronderstel ons het 'n React-komponent Block en ons het daarin gestileerde komponente geskep met behulp van Styled Components: Button en Container:

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

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

En stel jou nou voor dat ons nog 'n komponent Button nodig het, maar met wit teks vir die knoppie en 'n groen agtergrond.

Hiervoor is dit voldoende om op grond van ons komponent Button 'n nuwe komponent MdButton te skep en daarin slegs die eienskappe te spesifiseer wat ons wil verander:

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

Plaas al ons gestileerde komponente in Block:

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

Skep 'n leë React-komponent Block1. Skep daarin met behulp van Styled Components 'n gestileerde div met breedte en hoogte van 150px, 'n geel agtergrond, en 'n randwydte van 2px, noem dit DIVA.

Skep op grond van die div uit die vorige taak 'n soortgelyke div DIVB, maar met 'n groen agtergrond en 'n randwydte van 3px.

Skep in Block1 'n div Container. Plaas daarin twee komponente DIVA en tussen hulle een DIVB, wat jy geskep het in die vorige take vir hierdie les.