Paplašinātā komponenšu stilizēšana React

Pieņemsim, ka mums ir React komponents Block un mēs tajā esam izveidojuši ar Styled Components stilizētus komponentus Button un Container:

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

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

Un tagad iedomāsimies, ka mums vajag vēl vienu komponentu Button, tikai ar baltu pogas tekstu un zaļu fona krāsu.

Lai to izdarītu, mums pietiek uz mūsu komponenta Button bāzes izveidot jaunu komponentu MdButton un tajā norādīt tikai tās īpašības, kuras mēs vēlamies mainīt:

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

Izvietosim Block visus mūsu stilizētos komponentus:

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

Izveidojiet tukšu React komponentu Block1. Ar Styled Components palīdzību izveidojiet tajā stilizētu div ar platumu un augstumu 150px, dzeltenu fonu, un robežas platumu 2px, nosauciet to par DIVA.

Uz iepriekšējā uzdevuma div bāzes izveidojiet tādu pašu div DIVB, tikai ar zaļu fonu un robežas platumu 3px.

Block1 izveidojiet div Container. Izvietojiet tajā divus komponentus DIVA un starp tiem vienu DIVB, ko izveidojāt iepriekšējos šīs nodarbības uzdevumos.